How to iterate through an array of arrays in JSON using ng-repeat?

Question

I am trying to iterate over a JSON object userTypes.
For the below code:

In the 1st ng-repeat:
{{user.type}} outputs 'Parent'(as expected),
{{user.options}} outputs '[{"option1":"11QWERT","option2":"22QWERT"}]'(as expected).

But in the 2nd ng-repeat, I am not able to iterate through the user.options and output each of the {{options}}

What should be changed to get the option1 and option2 as the outputs in 2nd ng-repeat ?

JS snippet

var userTypes = [{
    "type": 'Parent',
    "options": [{
        "option1": "11QWERT",
        "option2": "22QWERT"
    }]
}]

HTML snippet

<li ng-repeat="user in userTypes">
    <p>{{user.type}}</p>
    <p>{{user.options}}</p>
    <li ng-repeat="option in user.options">
        <p>
            {{option}}
        </p>
    </li>
</li>

Artem Petrosian · Accepted Answer · 2015-05-06T07:46:43.547

Replace your child <li> with <ul> and then you can iterate user.options like so:

<li ng-repeat="user in userTypes">
    <p>{{user.type}}</p>
    <ul ng-repeat="(key, value) in user.options[0]">
        <p>{{key}}: {{value}}</p>
    </ul>
</li>

Or if your options may include more then one object:

<li ng-repeat="user in userTypes">
    <p>{{user.type}}</p>
    <ul ng-repeat="option in user.options">
        <li ng-repeat="(key, value) in option">{{key}}: {{value}}</li>
    </ul>
</li>

If you don't need object keys:

<ul ng-repeat="option in user.options">
    <li ng-repeat="item in option">{{item}}</li>
</ul>

Fiddle

Extended explanation:

In your example you have <li> tag inside another <li>:

<li ng-repeat="user in userTypes">
    <li ng-repeat="option in user.options">
    </li>
</li>

Since it is not a valid HTML browser will interprets this markup to following:

<li ng-repeat="user in userTypes">
</li>
<li ng-repeat="option in user.options">
</li>

Since ng-repeat creates new scope for each iteration you can't access user variable in second ng-repeat and iterator wouldn't run.

@dreamer: because it is a valid HTML, otherwise browser will close first `

nikola-miljkovic · Answer 2 · 2015-05-04T13:17:25.273

1

For this exact JSON input it should be like this:

<li ng-repeat="option in user.options">
    <p>
        {{option.option1}}
        {{option.option2}}
    </p>
</li>

However as you said you want non fixed number of options, update your JSON to be like this:

"options":["11QWERT","22QWERT"]

And then your code should work as you wanted it.

You can add each new element to list with simple coma before it.

edited May 04 '15 at 13:17

answered May 04 '15 at 13:11

nikola-miljkovic

652
4
14

the number of options in `options` is not fixed. so this cannot be used? – dreamer May 04 '15 at 13:13
Your JSON input is bad then, it should be: "options":["11QWERT","22QWERT"] ill update answer. – nikola-miljkovic May 04 '15 at 13:14

score 1 · Answer 3 · answered May 04 '15 at 13:58

1

Since user.options is an array you should loop it again. By doing that you will get an object, with that object you can access your options1 and option2 easily.

please refer working plunker:

http://embed.plnkr.co/5c3i5fY50jLP0fFgxkUX/preview

see through the code if you have any doubt.

Hope this helps

answered May 04 '15 at 13:58

Alhuck

1,029
8
11

no , this cannot be used because, the number of options in `user.options` will vary, hence i cannot call it explicitly using `options1` and `options2` – dreamer May 06 '15 at 06:24

Anton Bielousov · Answer 4 · 2015-11-20T18:30:05.033

1

A little aside, but just found out you can render a valid list HTML using ng-repeat-start/end in combination with ng-if="false" for the given array of arrays to flatten them:

<ul>
  <script ng-repeat-start="user in userTypes" ng-if="false"></script>
  <li ng-repeat="item in user.options">{{item}}</li>
  <script ng-repeat-end="" ng-if="false"></script>
</ul>

edited Nov 20 '15 at 18:30

answered Nov 20 '15 at 17:59

Anton Bielousov

1,954
2
13
11

score 0 · Answer 5 · answered May 04 '15 at 13:10

0

Just access the propertie of the option object in the second ng-repeat. Like option.option1

answered May 04 '15 at 13:10

Michel

26,600
6
64
69

the number of options in `options` is not fixed. so this cannot be used – dreamer May 04 '15 at 13:13
This solution doesn't depends on the length of the options collection. I guess your structure should be reworked. – Michel May 04 '15 at 13:18

a h · Answer 6 · 2015-05-04T13:19:14.770

0

You should probably make your user.options an object and not an array containing a single object.

Note the difference between these:

[{"option1":"11QWERT","option2":"22QWERT"}]
 {"option1":"11QWERT","option2":"22QWERT"}

You can then iterate the options with an ng-repeat like discussed here:

<li ng-repeat="(key, value) in user.options">
    <p>{{ key }}: {{ value }}</p>
</li>

edited May 04 '15 at 13:19

answered May 04 '15 at 13:13

a h

143
1
8

How to iterate through an array of arrays in JSON using ng-repeat?

6 Answers6