Angular - 从对象数组中获取数据答案

【问题标题】：Angular - get data from Object ArrayAngular - 从对象数组中获取数据
【发布时间】：2021-09-14 20:32:51
【问题描述】：

早上好，谁能给我建议？我很无知。我已经花了几个小时，但我不知道如何解决这个问题。

数据是虚构的，原始 JSON 要复杂得多。

JSON

   {
    "main": [
        [
            {
                "type": "dasdasdasd",
                "id": 5,
                "content": {
                    "title": "adadadsad",
                    "items": [
                        {
                            "date": "2012-02-02T11:23:00Z",
                            "id": 12,
                            "name": "test",
                            "isEnabled": false,
                            "isHighlited": false,
                            "images": {
                                "lists": {
                                    "small": [
                                        {
                                            "id": 18,
                                            "position": 0,
                                            "titleImage": true,
                                            "url": "",
                                            "thumbnailReady": true
                                        }
                                    ],
                                    "original": [
                                        {
                                            "id": 19,
                                            "position": 0,
                                            "titleImage": true,
                                            "url": "",
                                            "thumbnailReady": true
                                        }
                                    ],
                                    "large": [
                                        {
                                            "id": 22,
                                            "position": 0,
                                            "titleImage": true,
                                            "url": "",
                                            "thumbnailReady": true
                                           
                                        }
                                    ],
                                    "medium": [
                                        {
                                            "id": 23,
                                            "position": 0,
                                            "titleImage": true,
                                            "url": "",
                                            "thumbnailReady": true
                                            
                                        }
                                    ]
                                }
                            },
                            "enum": "LINIE",
                            "url": "https://test.com"
                        }
                    ]
                }
            }
        ]
    ],
    "second": [
    ]
}

如何从 main -> content -> items -> images -> url 获取？更准确地说，每张图片都来自该网址。

非常感谢您的帮助。

【问题讨论】：

在这种情况下要获取小图像 url（如果我正确地遵循..lol），它将是 main[0].content.items[0].images.lists.small[0].url 其中 0 是数组中项目的索引。您还可以使用jsonviewer.stack.hu 之类的网站查看 JSON 细分
Y 但我需要每张图片，意思是：大、小、中等的 URL。
你确定main 应该是一个双重嵌套数组吗？

标签： arrays json angular typescript object

【解决方案1】：

看起来您的主数组有一个数组作为第一个元素。如果正确，则取 main 的第一个元素，然后对其进行循环。

let jsonObj = {
    "main": [
        [
            {
                "type": "dasdasdasd",
                "id": 5,
                "content": {
                    "title": "adadadsad",
                    "items": [
                        {
                            "date": "2012-02-02T11:23:00Z",
                            "id": 12,
                            "name": "test",
                            "isEnabled": false,
                            "isHighlited": false,
                            "images": {
                                "lists": {
                                    "small": [
                                        {
                                            "id": 18,
                                            "position": 0,
                                            "titleImage": true,
                                            "url": "",
                                            "thumbnailReady": true
                                        }
                                    ],
                                    "original": [
                                        {
                                            "id": 19,
                                            "position": 0,
                                            "titleImage": true,
                                            "url": "",
                                            "thumbnailReady": true
                                        }
                                    ],
                                    "large": [
                                        {
                                            "id": 22,
                                            "position": 0,
                                            "titleImage": true,
                                            "url": "",
                                            "thumbnailReady": true
                                           
                                        }
                                    ],
                                    "medium": [
                                        {
                                            "id": 23,
                                            "position": 0,
                                            "titleImage": true,
                                            "url": "",
                                            "thumbnailReady": true
                                            
                                        }
                                    ]
                                }
                            },
                            "enum": "LINIE",
                            "url": "https://test.com"
                        }
                    ]
                }
            }
        ]
    ],
    "second": [
    ]
}

let smallImg = "", originalImg = "", largeImg = "", mediumImg = "";
jsonObj.main[0].forEach(mainItem => {
  mainItem.content.items.forEach(item => {
    smallImg = item.images.lists.small[0].url;
    originalImg = item.images.lists.original[0].url;
    largeImg = item.images.lists.large[0].url;
    mediumImg = item.images.lists.medium[0].url;
  });
});
console.log(smallImg);
console.log(originalImg);
console.log(largeImg);
console.log(mediumImg);

【讨论】：