Проход по массиву массивов, содержащих объекты - PullRequest
1 голос
/ 27 мая 2019

Это моя первая публикация, я также очень плохо знаком с AngularJ и немного новичок в 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>

Вывод, который я получаю вместо этого, представляет собой просто список: без ошибок в консоли.

Массивы объектов сами по себе происходят из мастер-массива, содержащего все объекты, и я попытался сгруппировать их в массивы по названию группы.Я не уверен, что это лучшее решение.

Ответы [ 2 ]

0 голосов
/ 28 мая 2019

Вложенный 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.

0 голосов
/ 27 мая 2019

То, что вы должны попробовать, это превратить 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"
        }
    ]
}

А затем в ваш угловой фрагмент:

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...