The JSON I'm passing into my view has objects and arrays inside of it. Example:
{ name: "test", projects: [ { name: "project1", tasks: "task1" } ] }
Using ng-repeat, I can say (key, value) in items
and am given what you'd expect, each key and the stringified version of the object or array.
Is there a 'best practice' for iterating over the objects and arrays inside an ng-repeat?
You can perform some operation on your data and can create another object with the modified structure so that it can be used with ng-repeat to display the table in the form you want. You can understand this better with an example.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.
Just following up with an answer, as I was able to figure this out. It was simpler than I realized. Just used another ng-repeat for items that were arrays.
<div class="container" ng-repeat="item in items">
<table class="table table-striped table-bordered table-condensed">
<tr>
<th class="span3">name</th>
<td>{{ item.name }}</td>
</tr>
<tr>
<th class="span3">accounts</th>
<td>
<ul ng-repeat="account in item.accounts">
<li>username: {{ account.username }}</li>
<li>password: {{ account.password }}</li>
</ul>
</td>
</tr>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With