AngularJS ng-repeat display nested array in table

Question

I want to display nested array in table. Array structure:

0: 
    value1:"something",
    ...
    firstNestedArray:{
        value2:"something2",
         ...
         secondNestedArray:{
             value3:"something3",
             ...
             thirdNestedArray:{
                 value4:"something4",
                 ...
             }
         }
    }

Problem is that I don't know how to correctly process this array to display it in table.

I tried this:

<tbody data-ng-repeat="item1 in firstNestedArray">
    <tr data-ng-repeat="item2 in item1.secondNestedArray">
        <td>{{item1.value1}}</td>
        <td>
            {{item2.value2)}}
            <br>
            {{item2.value3)}}
        </td>
<!--    Problem appears here:    -->
        <td>
            {{thirdNestedArray.value1}}
        </td>
    </tr>
</tbody>

How can i display all this thirdNestedArray values that I need? Because all this values from array have to be displayed in one row.

|column1|column2|column3|column4|column5|
|value1 |value2 |value3 |value4 |value5 |

I've tried to do it like this bu this doesn't work:

<tbody data-ng-repeat="item1 in firstNestedArray">
    <tr data-ng-repeat="item2 in item1.secondNestedArray">
        <td>{{item1.value1}}</td>
        <td>
            {{item2.value2)}}
            <br>
            {{item2.value3)}}
        </td>

<!--               Does not work:    -->
        <div data-ng-repeat="item2 in item1.thirdNestedArray">
            <td>
                {{item2.value4}
            </td>
        </div>
    </tr>
</tbody>

you can use <tbody> markup to group your rows. Don't use div anyway, apply ngRepeat directive to tr/td you want to repeat — vp_arth
– vp_arth, Commented Nov 25, 2015 at 15:46

Harris · Accepted Answer · 2015-11-25 15:42:52Z

1

First of all, you can't put a div in the middle of a table like that, Angular or not. Tables have a very specific parent-child tree.

Second, just use ng-repeat on the TD element you want to repeat. You'll have to track what the maximum number of TDs in ANY of the TRs is so that you can compensate in all of the other TRs (which may be shorter). I think the easiest way to do this is to check the source arrays' lengths in the controller, and push empty elements onto the ends of the shorter arrays that you're building from so that they all match the maximum size. This padding means you won't have to deal with more complex markup manipulations.

edited Nov 25, 2015 at 15:42

answered Nov 25, 2015 at 15:37

Harris

1,78516 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

AngularJS ng-repeat display nested array in table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related