如何在JavaScript中迭代数组对象？

Question

我已经在这个问题上待了几个小时了。 代码的工作方式如下：有人进行图像搜索，我从API中获取答案，然后将图像注入div以呈现结果。 它可以从3到500张图像变化，但不固定。

除非我无法显示正确数量的图像。 问题出在迭代或我呈现数据的方式上，但是尝试了一切之后，我认为我需要帮助。

我从API收到的内容是这种形式的：

{"icon":{"0":"https://address/1587.svg","1":"https://address/3810.svg","2":"https://address/89090.svg","3":"https://address/89400.svg"}}

这是我的（简化）代码：

makeHTTPRequest('GET', url).then((resp) => {
        var parsedResp = JSON.parse(resp);
        var arrayicon = Object.keys(parsedResp).map(function(key) {
            return parsedResp[key]
        });
        injectIcons(arrayicon)
        }; 

        injectIcons = (icons) => {
        let htmlString = '';

        for (var i = 0; i < icons.length; i++) {
            const IconDiv = `src="${icons[i]}"`;
            htmlString = htmlString + IconDiv
        }

        document.getElementById('results').innerHTML = htmlString
    };

Answer 1

尝试像这样更改代码：

var response = {"icon":{"0":"https://address/1587.svg","1":"https://address/3810.svg","2":"https://address/89090.svg","3":"https://address/89400.svg"}}

var icons = response.icon;

for (var k in icons ) {
     const IconDiv = `src="${icons[k]}"`;
     htmlString = htmlString + IconDiv
}

Answer 2

在这种情况下，可以使用一个简单的while循环（假设您无法更改API以返回实际的Array会更好）：

 const data = {"icon":{"0":"https://address/1587.svg","1":"https://address/3810.svg","2":"https://address/89090.svg","3":"https://address/89400.svg"}}; let i = 0; while (data.icon[i]) { console.log(data.icon[i++]); } 

编辑：您的代码实际上真的接近工作。 您只需要访问parsedResp.icon而不是parsedResp ：

 var parsedResp = {"icon":{"0":"https://address/1587.svg","1":"https://address/3810.svg","2":"https://address/89090.svg","3":"https://address/89400.svg"}}; var arrayicon = Object.keys(parsedResp.icon).map(function(key) { return parsedResp.icon[key] }); console.log(arrayicon);