如果对象属性不存在，请跳过它

Question

我目前正在使用《纽约时报》的api，并从每个帖子中提取一张图片。目前我得到了一个"；TypeError:无法读取null的属性"0"；因为of的属性被设置为null，而其他帖子都有信息来填充我的img src标记。我用的是香草js。这里是一个空的API属性-其他每个帖子都有一个数组，我可以从中提取。

多媒体：空

如果一个属性设置为null，我如何过滤或编写代码让JS忽略，这样我就不会收到这个错误。谢谢

function renderSingleArticle(article) {
const url = `${article.multimedia[0].url}`;
return `
<div class="column-third">
<div class="article-card">
<h2 class="news-title">${article.title}</h2>
<img src=${url} alt="CurrentNews">
<div class="article-card-text>
<p class="abstract">${article.abstract}</p>
<a href=${article.short_url} target="blank">Click here to read more...</a>
</div>
</div>
</div>
`;

Answer 1

您可以在<img标记本身上创建条件，它负责处理顶部的所有逻辑。

function renderSingleArticle(article) {
const img = article.multimedia && article.multimedia.length>0 && article.multimedia[0].url ? `<img src="${article.multimedia[0].url}" alt="CurrentNews">` : ''; 
return `
<div class="column-third">
<div class="article-card">
<h2 class="news-title">${article.title}</h2>
${img}
<div class="article-card-text>
<p class="abstract">${article.abstract}</p>
<a href=${article.short_url} target="blank">Click here to read more...</a>
</div>
</div>
</div>
`;

Answer 2

试试这个：

const url = article && article.multimedia[0] ? `${article.multimedia[0].url}` : '';

{url && <img src=${url} alt="CurrentNews">}

您可以在JS中实现条件运算符：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

这个想法是，当你得到一个空/null值时，你不需要渲染它们来避免错误。

Answer 3

我只想使用带有可选链接的||

let article = { multimedia: null };
console.log((article.multimedia || [])[0]?.url)