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

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

2 个答案: