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, Oct 28 '16 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, Oct 28 '16 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, Oct 28 '16 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, Oct 28 '16 at 23:27
I edited the plunker in my answer below. It references by indexes too now. Let me know if I can help any other way. — Luke Becker, Oct 28 '16 at 23:29
Actually, would that be able to be used dynamically? I have it the way it is now because, in conjunction with rails, I am able to change the dailyData[0] with dailyData[<%= index %>]. I could probably explain the entire process as well if need be. — Padagomez, Oct 28 '16 at 23:30
I don't think Angular will be able to handle that. You may have to try some other trick or way around that. I found this article that might be helpful to you: https://spin.atomicobject.com/2013/11/22/pass-rails-data-angularjs/ — Luke Becker, Oct 28 '16 at 23:33

score 2 · Answer 1 · edited May 23 '17 at 10:30

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

score 2 · Accepted Answer · edited Nov 12 '16 at 12:08

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>

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

2 Answers2