如何使用JavaScript遍历JSON API中对象中的多个数组
如何使用JavaScript遍历JSON API中对象中的多个数组
提问于 2021-09-01 13:06:07
我有一个API，我正在尝试从中获取和显示数据。我想要访问的数据在'equipments‘数组中，如下所示。
我试图遍历每个项目的'equipments‘数组，但在显示数据时遇到了问题。我相信我要么没有正确地访问它，要么没有在某个地方包含另一个循环。
这是我到目前为止所知道的：
// Fetch Data
function getData() {
fetch(url)
.then((res) => res.json())
.then((data) => {
let output = "";
data.groups.equipments.forEach(function(product) {
output += `
<div class="card">
<img src=${product.photos.text} alt=${product.model} />
<h3>${product.year} ${product.manufacturer} ${product.model}</h3>
<p>${product.hours} hours</p>
<a href='https://used.battlefieldequipment.ca/en/${product["group-code"]}/${product.equipments["serial-number"]}' class="btn btn-primary">View Details</a>
</div>
`;
});
dataOutput.innerHTML = output;
})
}
getData();你知道我需要做什么才能让它工作吗？
Stack Overflow用户
回答已采纳
发布于 2021-09-01 13:15:15
因为data.groups是一个数组，所以在访问equipments之前必须首先遍历它们。
您还可以使用forEach遍历它们，所以这很容易！
data.groups.forEach(function(group) {
group.equipments.forEach(product) {
output += `
<div class="card">
<img src=${product.photos.text} alt=${product.model} />
<h3>${product.year} ${product.manufacturer} ${product.model}</h3>
<p>${product.hours} hours</p>
<a href='https://used.battlefieldequipment.ca/en/${product["group-code"]}/${product.equipments["serial-number"]}' class="btn btn-primary">View Details</a>
</div>`;
}
})
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69014358
复制相关文章
相似问题
腾讯云开发者
