Как перебирать массив массивов в JSON с помощью ng-repeat?

Я пытаюсь выполнить итерацию по объекту JSON userTypes.
Для приведенного ниже кода:

В первом ng-повторе:
{{user.type}} выводит "Родительский" (как и ожидалось),
{{user.options}} выводит '[{ "option1": "11QWERT", "option2": "22QWERT" }]' (как ожидалось).

Но во втором ng-repeat я не могу выполнить итерацию через user.options и выводить каждый из {{options}}

Что нужно изменить, чтобы получить option1 и option2 в качестве выходов во 2-й ng-repeat?

фрагмент JS

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

фрагмент 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>

Ответ 1

Замените дочерний элемент <li> на <ul>, а затем вы можете выполнить итерацию user.options следующим образом:

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

Или, если ваш options может содержать более одного объекта:

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

Если вам не нужны клавиши объекта:

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

Fiddle

Расширенное объяснение:

В вашем примере у вас есть тег <li> внутри другого <li>:

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

Так как это недействительный HTML-браузер, он будет интерпретировать эту разметку следующим образом:

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

Так как ng-repeat создает новую область для каждой итерации, вы не можете получить доступ к переменной user во втором ng-repeat, и итератор не будет работать.

Ответ 2

Для этого точного ввода JSON это должно быть следующим:

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

Однако, как вы сказали, вы хотите не фиксированное количество опций, обновите свой JSON таким образом:

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

И тогда ваш код должен работать так, как вы этого хотели.

Вы можете добавить каждый новый элемент в список с простой комой перед ним.

Ответ 3

Так как user.options - массив, вы должны его снова зацикливать. Делая это, вы получите объект, с этим объектом вы можете легко получить доступ к вашим опциям1 и option2.

обратитесь к рабочему плункеру:

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

просмотрите код, если у вас есть какие-либо сомнения.

Надеюсь, что это поможет

Ответ 4

Немного в стороне, но только что выяснилось, вы можете отобразить правильный HTML-код с помощью ng-repeat-start/end в комбинации с ng-if="false" для заданного массива массивов, чтобы сгладить их:

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

Ответ 5

Просто войдите в свойство объекта option во втором ng-повторе. Как option.option1

Ответ 6

Вероятно, вы должны сделать свой user.options объект, а не массив, содержащий один объект.

Обратите внимание на разницу между ними:

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

Затем вы можете перебирать опции с помощью ng-repeat, как обсуждалось здесь:

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