ng-repeat elements over nested objects

Question

Say I have a nested object literal, and I want to display its contents in a table. If the object is 2 levels deep, I can use:

      <table>
          <thead>
            <tr>
              <td>key</td>
              <td>value</td>

            </tr>
          </thead>
          <tbody ng-repeat="(key01, value01) in data">
            <tr ng-repeat="(key02, value02) in value01">
                <td>{{key02}}</td>
                <td>{{value02}}</td>
            </tr>
          </tbody>
        </table>

If I have a nested object that is 3 or 4 levels deep, using a similar method how would I display the data in a table? The best I have is from this previously answered question, however I do not want conduct this logic in a controller, as suggested here.

I need a way to nest more than 2 ng-Repeats as seen above since in my application, the key names are variable at data generation.

An example of a 3 level deep nest object:

$scope.someVar =    { 'data': {
                              'A': {
                                     'x':'someValue'
                                   },
                               'B': {
                                     'y':'anotherValue'
                                    } 
                              }
                     }

Did you take a look at the following approach using templates for recursion? http://stackoverflow.com/questions/15661289/how-can-i-make-recursive-templates-in-angularjs-when-using-nested-objects — Himmet Avsar, Nov 27 '14 at 03:53

score 1 · Accepted Answer · answered Nov 27 '14 at 03:58

1

Unfortunately for your stated requirements it's not possible. The table element structure just doesn't have the kind of nesting you want. I know you said you don't want to do this in a controller but that's probably the best way of doing this as a table is a way of representing 2D information, not more.

Also it should be said that if you're putting a lot of data in these nested ngRepeats you're very likely to slow the browser down to an unusable state.

If you really can't do some kind of transformation in the controller (which is easier on the browser as it's done once, instead of every time something changes...) you would have to use div's with table like styling. Try here (link)

answered Nov 27 '14 at 03:58

Simeon Cheeseman

1,748
1
13
24

Thank you very much! The reason for using nested ng-Repeats, is that while using Firebase API's, changes in data are automatically pushed without me having to write additional controls. I wasn't aware that when done in controller, it is only done once, I will have to look into this further and see if firebase will still push the updates into the re-formatted data created in the controller. Additionally, thanks for the advice on div style tabling. – eric Nov 27 '14 at 04:13
You're welcome. I should mention that my assumption of done once was HTTP post or similar whereby you would do the transformation once on load of data. If you're using firebase with async type pushes my advice may be a bit off as you'd probably have to re-format every time something changes. If you have more problems it would probably be best to repost this question as a more specific Firebase/AngularJS problem as someone else has probably come across it before. – Simeon Cheeseman Nov 27 '14 at 21:08
Thanks for that, question has been posted here: http://stackoverflow.com/q/27179400/4286092 – eric Nov 27 '14 at 22:19

score 0 · Answer 2 · answered Nov 27 '14 at 03:35

0

u should be doing something like this

$scope.someVar = { 'data': {
     'A': {
          'x':'someValue'
           },
     'B': {
         'y':'anotherValue'
           } 
}

then you have to use ng-repeat like this,

<tbody ng-repeat="(key01, value01) in someVar.data">
        <tr ng-repeat="(key02, value02) in value01">

answered Nov 27 '14 at 03:35

Kalhan.Toress

21,683
8
68
92

I am actually looking for a way to nest for than 2 ng-Repeats together, as this approach won't work for my particular application, since the key names (in this case the key 'data') are variable at someData generation. Question updated, and thank you for your suggestion! – eric Nov 27 '14 at 03:39

ng-repeat elements over nested objects

2 Answers2