如何使用 ng-repeat 遍历 JSON 中的数组数组？答案

【问题标题】：How to iterate through an array of arrays in JSON using ng-repeat?如何使用 ng-repeat 遍历 JSON 中的数组数组？
【发布时间】：2016-09-30 19:10:52
【问题描述】：

我正在尝试遍历 JSON 对象 userTypes。
对于以下代码：

在第一个 ng-repeat 中：
{{user.type}} 输出 'Parent'（如预期的那样），
{{user.options}} 输出 ' [{"option1":"11QWERT","option2":"22QWERT"}]'（符合预期）。

但是在第二个ng-repeat 中，我无法遍历user.options 并输出每个{{options}}

为了得到option1 和option2 作为第二个ng-repeat 中的输出，应该进行哪些更改？

JS sn-p

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

HTML sn-p

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

【问题讨论】：

标签： arrays json angularjs angularjs-ng-repeat

【解决方案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 为每次迭代创建新范围，您无法在第二个ng-repeat 访问user 变量，并且迭代器不会运行。

【讨论】：

@dreamer: 因为它是一个有效的 HTML，否则浏览器会自动关闭第一个 <li> 标签，你会失去你的嵌套迭代

【解决方案2】：

对于这个确切的 JSON 输入，它应该是这样的：

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

但是，正如您所说，您想要非固定数量的选项，请将您的 JSON 更新为：

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

然后您的代码应该可以按照您的意愿工作。

您可以将每个新元素添加到列表中，并在其前加上简单的逗号。

【讨论】：

options 中的选项数量不固定。所以这个不能用？
你的 JSON 输入是错误的，它应该是："options":["11QWERT","22QWERT"] ill update answer。

【解决方案3】：

由于 user.options 是一个数组，你应该再次循环它。通过这样做，您将获得一个对象，使用该对象您可以轻松访问您的 options1 和 option2。

请参考工作人员：

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

如果您有任何疑问，请查看代码。

希望对你有帮助

【讨论】：

不，这不能使用，因为user.options 中的选项数量会有所不同，因此我无法使用options1 和options2 显式调用它

【解决方案4】：

稍稍搁置一下，但刚刚发现您可以使用ng-repeat-start/end 结合ng-if="false" 为给定的数组数组呈现有效的列表HTML 以展平它们：

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

只需在第二个 ng-repeat 中访问 option 对象的属性。赞option.option1

【讨论】：

options 中的选项数量不固定。所以这个不能用
此解决方案不依赖于选项集合的长度。我想你的结构应该重新设计。

【解决方案6】：

您可能应该将您的 user.options 设为一个对象，而不是一个包含单个对象的数组。

注意它们之间的区别：

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

然后您可以使用 ng-repeat 来迭代选项，就像讨论过的 here：

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

【讨论】：