JavaScript获取API，用于在具有空值的索引上停止循环

Question

如果发现一个空图像src，我正在想办法转到下一个(I(。现在，当它碰到一个空img src时，循环就停止了。错误如下：

"TypeError: Cannot read properties of null (reading 'href')"

我看到了一些将if语句与continue一起使用的建议，但无法使其发挥作用。在stackoverflow和其他论坛上查找了一段时间，但没有找到任何解决问题的方法。提前感谢您的建议。

fetch(`https://real-estate12.p.rapidapi.com/listings/sale?state=CA&city=San%20Francisco&page=1&sort=relevant&type=single-family%2Cmulti-family`, {
"method": "GET",
"headers": {
"x-rapidapi-host": "real-estate12.p.rapidapi.com",
"x-rapidapi-key": "removingAPIkeyforStackOverflow"
}
})
.then(function (response) {
return response.json();
})
.then(function (data) {     
houseCardsEl.innerHTML = '';

for (let i = 0; i < 12; i++) {
if (data.properties[i].primary_photo.href === null) {
continue;
}
houseCardsEl.innerHTML += 
`<div id="column-${i}" class="column is-one-quarter">
<div class="card">
<div class="card-image">
<figure id="houseImage" class="image is-4by3">
<img src="${data.properties[i].primary_photo.href}" alt="House image ${i}">
</figure>
</div>
</div>
</div>`;
}
})
.catch(err => {
console.error(err);
});

Answer 1

我建议您切片并测试数据：

注意：这将跳过显示器中的房屋图像2-您可以使用单独的计数器解决此问题

我们试图显示12，但将显示实际存在的<=12

const data = { properties: [ 
{primary_photo:{ href: "photo1.jpg"}},
{primary_photo:{ href: "photo2.jpg"}},
{ "noprimary_photo":""},
{primary_photo:{ href: "photo3.jpg"}},
]};
const html = data.properties.slice(0,12).map(({primary_photo},i) => primary_photo ? `<div id="column-${i}" class="column is-one-quarter">
<div class="card">
<div class="card-image">
<figure id="houseImage" class="image is-4by3">
<img src="${data.properties[i].primary_photo.href}" alt="House image ${i}">
</figure>
</div>
</div>
</div>` : '').join("")
console.log(html)