web-dev-qa-db-fra.com

Comment parcourir un tableau de tableaux en JSON à l'aide de ng-repeat?

J'essaie de parcourir un objet JSON userTypes.
Pour le code ci-dessous:

Dans la 1ère répétition:
{{user.type}} sorties 'Parent' (comme prévu),
{{user.options}} génère '[{"option1": "11QWERT", "option2": "22QWERT"}]' (comme prévu).

Mais dans le 2nd ng-repeat, je ne parviens pas à parcourir le user.options et à afficher chacun des {{options}}

Qu'est-ce qui devrait être changé pour obtenir le option1 et le option2 comme sorties dans le 2nd ng-repeat?

JS Snippet 

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

Extrait HTML 

<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>
arraysjsonangularjsangularjs-ng-repeat
15
dreamer

Remplacez votre <li> enfant par <ul> et vous pourrez ensuite itérer user.options comme suit:

<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>

Ou si votre options peut inclure plus d'un objet:

<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>

Si vous n'avez pas besoin de clés d'objet:

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

Fiddle

Explication étendue:

Dans votre exemple, vous avez la balise <li> dans un autre <li>:

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

Comme ce n’est pas un navigateur HTML valide, ce balisage sera interprété comme suit:

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

Puisque ng-repeat crée une nouvelle portée pour chaque itération, vous ne pouvez pas accéder à la variable user en deuxième ng-repeat et l'itérateur ne s'exécute pas.

11
Artem Petrosian

Puisque user.options est un tableau, vous devez le boucler à nouveau. En faisant cela, vous obtiendrez un objet. Avec cet objet, vous pourrez accéder facilement à vos options1 et option2.

veuillez vous référer au plunker de travail:

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

voir à travers le code si vous avez un doute.

J'espère que cela t'aides 

1
Alhuck A

Un peu de côté, mais nous venons de découvrir que vous pouvez restituer une liste HTML valide en utilisant ng-repeat-start/end en combinaison avec ng-if="false" pour le tableau donné de tableaux afin de les aplatir:

<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>
1
Anton Bielousov

Pour cette entrée JSON exacte, cela devrait être comme ceci:

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

Cependant, comme vous le souhaitez, vous souhaitez mettre à jour votre JSON de la manière suivante:

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

Et ensuite, votre code devrait fonctionner comme vous le souhaitiez.

Vous pouvez ajouter chaque nouvel élément à la liste avec un simple coma.

1
nikola-miljkovic

Vous devriez probablement faire de votre user.options un objet et non un tableau contenant un seul objet.

Notez la différence entre ceux-ci:

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

Vous pouvez ensuite itérer les options avec un ng-repeat comme discuté ici :

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

Il suffit d’accéder à la propriété de l’objet option dans la deuxième répétition. Comme option.option1 

0
Michael P. Bazos