AngularJS iterating through a multi-layered array with ng-repeat

Question

I have an issue with the ng-repeat directive when it comes to iterating through an array with multiple layers. Much like a Json object but not quite.

To build the array I use code akin to this:

$scope.dailyData = []
$scope.dailyData[0] = []
$scope.dailyData[0].push([{"today":null,"day2":1,"day3":null,"day4":null,"day5":null,"day6":null,"day7":null,"title":"Queries Built","id":null}])

This is just a sample of what the program actually does, and I do it this way for a specific reason that may or may not be relevant to the question.

This outputs to an array that looks like this.

[[[{"title":"Queries Built","today":null,"day2":1,"day3":null,"day4":null,"id":null}]]]

There are three arrays and an object in the middle. The problem is I can't seem to get the ng-repeat to pull the data from the object.

I want it to output like this:

|     Title     | Today | Yesterday |
| Queries Built |  null |     1     |

But everything I've tried on ng-repeat doesn't seem to work. One such example:

<div ng-repeat="row in dailyData[0]">
    <tr>
        <td>{{row[0]["title"]}}</td>
        <td>{{row["today"]}}</td>
        <td>{{row["day2"]}}</td>
        <td>{{row["day3"]}}</td>
        <td>{{row["day4"]}}</td>
    </tr>
</div>

The first row in here is a different method from the others, neither of them works.

Here's a fiddle: https://jsfiddle.net/rms9dv8j/2/

You need another array reference, like this "row in dailyData[0][0]" I won't ask why you have 3 nested arrays, presumably you have good reason for that :) — Mikkel
– Mikkel, Commented Oct 28, 2016 at 21:42
When I do row in dailyData[0][0] then later try row["title"] nothing shows up. I'm currently trying to get a fiddle running to share — Padagomez
– Padagomez, Commented Oct 28, 2016 at 21:56
you should be able to reference your nested data by giving it a name. For example, dailyData.array[0].array2[0] — Luke Becker
– Luke Becker, Commented Oct 28, 2016 at 23:24
I didn't quite understand what you meant when you left the answer below, I'll try that out and let you know how it goes. I was reluctant because I'm working around an already created system. — Padagomez
– Padagomez, Commented Oct 28, 2016 at 23:27

Mr Lister · Accepted Answer · 2016-11-12 12:08:14Z

2

The main problem is that you used a <DIV> tag in the middle of the table, which is probably why the browser didn't render anything.

In this fiddle:

https://jsfiddle.net/5ox7Ledw/

<div ng-repeat="row in dailyData[0][0]">
    <tr>
        <td>{{row[0]["title"]}}</td>

I simplified the data and moved the ng-repeat into the TR element, while also deleting the erroneous DIV

<tr ng-repeat="row in dailyData">
    <td>{{row.title}}</td>

edited Nov 12, 2016 at 12:08

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Oct 29, 2016 at 3:24

Mikkel

7,7773 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:30:30Z

2

I think you need to restructure your data so that it is in a better format.

You will need to do a nested loop similar to what I've done in this plnkr: http://plnkr.co/edit/CqUHwj?p=info

<div ng-app="module" ng-controller="ctrl">
  <div ng-repeat="row in array">
     {{row.name}}
     <div ng-repeat="row2 in row.array2">
       {{row2.name}}
     </div>
  </div>
</div>

More helpful information can be found in this post:

Nested ng-repeat

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Oct 28, 2016 at 21:46

Luke Becker

8947 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS iterating through a multi-layered array with ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related