循环遍历包含对象的数组答案

【问题标题】：Loop through array of arrays containing objects循环遍历包含对象的数组
【发布时间】：2019-10-13 09:24:49
【问题描述】：

这是我第一次发帖，我对 AngularJs 也很陌生，对 JavaScript 也有些陌生。我希望我提供足够的信息。我有一个包含对象数组 [[{},{},{}],[{},{},{}],[{},{},{}]] 的数组。有没有办法使用 AngularJs 循环并输出类似于以下内容的内容？

组标题 1

01 项目标题1：项目描述
02 项目标题2：项目描述

组标题 2

03 项目标题1：项目描述
04 项目标题2：项目描述

==============

$scope.groups_array = [
    [
        {
            "id": "01 ",
            "": [
                "Item Title 1",
                "Item description"
            ],
            "group_id": "A",
            "title": "Group Title 1"
        },
        {
            "id": "02 ",
            "": [
                "Item Title 2",
                "Item description"
            ],
            "group_id": "A",
            "title": "Group Title 1"
        }
    ],
    [
        {
            "id": "03 ",
            "": [
                "Item Title 1",
                "Item description"
            ],
            "group_id": "B",
            "title": "Group Title 2"
        },
        {
            "id": "04 ",
            "": [
                "Item Title 2",
                "Item description"
            ],
            "group_id": "B",
            "title": "Group Title 2"
        }
    ]
]

$scope.group_title = ["Group Title 1", "Group Title 2"];

<div>
    <div ng-repeat="title in group_title">
        <h1>{{title}}</h1>
        <ul>
            <li ng-repeat="item in groups_array">
              {{item.id + ' ' + item[''][0]}}: {{item[''][1]}}
            </li>
        </ul>
    </div>
</div>

我得到的输出只是一个简单的 : 列表，在控制台中没有错误。

对象数组本身来自包含所有对象的主数组，我尝试按组标题将它们分组到数组中。我不确定这是否是最佳解决方案。

【问题讨论】：

如果可以的话，你应该考虑一个不同的对象结构，其中没有一个以空字符串作为键的属性。

标签： arrays angularjs javascript-objects

【解决方案1】：

嵌套的ng-repeat需要选择正确的组进行迭代：

<div>
    <div ng-repeat="title in group_title">
        <h1>{{title}}</h1>
        <ul>
            ̶<̶l̶i̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶i̶t̶e̶m̶ ̶i̶n̶ ̶g̶r̶o̶u̶p̶s̶_̶a̶r̶r̶a̶y̶"̶>̶
            <li ng-repeat="item in groups_array[$index]">
              {{item.id + ' ' + item[''][0]}}: {{item[''][1]}}
            </li>
        </ul>
    </div>
</div>

这假定group_title 数组中的标题顺序与groups_array 中组的顺序相匹配。

【讨论】：

将 [$index] 添加到 ng-repeat="item in groups_array" 解决了这个问题！非常感谢

【解决方案2】：

您应该尝试将 groups_array 转换为类似的对象

$scope.groups_array = {
    "Group Title 1": [
        {
            "id": "01 ",
            "": [
                "Item Title 1",
                "Item description"
            ],
            "group_id": "A",
            "title": "Group Title 1"
        },
        {
            "id": "02 ",
            "": [
                "Item Title 2",
                "Item description"
            ],
            "group_id": "A",
            "title": "Group Title 1"
        }
    ],
    "Group Title 2": [
        {
            "id": "03 ",
            "": [
                "Item Title 1",
                "Item description"
            ],
            "group_id": "B",
            "title": "Group Title 2"
        },
        {
            "id": "04 ",
            "": [
                "Item Title 2",
                "Item description"
            ],
            "group_id": "B",
            "title": "Group Title 2"
        }
    ]
}

然后在你的 Angular sn-p 中：

<div>
    <div ng-repeat="title in group_title">
        <h1>{{title}}</h1>
        <ul>
            <li ng-repeat="item in groups_array[title]">
              {{item.id + ' ' + item[''][0]}}: {{item[''][1]}}
            </li>
        </ul>
    </div>
</div>

【讨论】：