Uncaught TypeError: Cannot destructure property 'title' of 'article[i]' as it is undefined.というエラーが常に発生してしまう
解決したいこと
Javascriptでデータ処理をしているところでなぜかエラーが発生します。
なにがいけないのかよくわかりません。
だれか教えてください。
発生している問題・エラー
Uncaught TypeError: Cannot destructure property 'title' of 'article[i]' as it is undefined.
該当するソースコード
const article = [
{
title: 'テスト1',
year: 2024,
month: 5,
date: 13,
tag: 'その他',
image: '/tools/calculator.img',
pass: '/tools/calculator',
},
{
title: 'テスト2',
year: 2024,
month: 1,
date: 10,
tag: 'その他',
image: '/other/image.img',
pass: '/other/test/',
},
{
title: 'テスト3',
year: 2024,
month: 5,
date: 16,
tag: 'その他',
image: '/other/image.img',
pass: '/other/01/',
},
];
const popularArticle = [1, 2];
const refinement = document.querySelectorAll(`.articleCardConteiner`);
for(let i = 0; i < refinement.length; i++){
console.log(refinement);
if(refinement[i].id === 'allArticle'){
const articleCardConteiner = document.querySelector(`#${refinement[i].id}`);
for(let i = 0; i < article.length; i++){
const {title, year, month, date, tag, image, pass} = article[i];
const content =
`<article class="article-card">
<a href="${pass}">
<img src="/no-image.png" alt="ヘッダー画像" width="100" height="100" class="article-card_img">
<p class="article-card_title">${title}</p>
<p class="article-card_day">${year}/${month}/${date}</p>
</a>
</article>`;
articleCardConteiner.insertAdjacentHTML('beforeend', content);
};
}else if(refinement[i].id === 'popularArticle'){
const articleCardConteiner = document.querySelector(`#${refinement[i].id}`);
for(let i = 0; i < article.length; i++){
if(!popularArticle){
const {title, year, month, date, tag, image, pass} = article[popularArticle[i]];
const content =
`<article class="article-card">
<a href="${pass}">
<img src="/no-image.png" alt="ヘッダー画像" width="100" height="100" class="article-card_img">
<p class="article-card_title">${title}</p>
<p class="article-card_day">${year}/${month}/${date}</p>
</a>
</article>`;
articleCardConteiner.insertAdjacentHTML('beforeend', content);
}
};
}else if(refinement[i].id === 'newArticle'){
const articleCardConteiner = document.querySelector(`#${refinement[i].id}`);
for(let i = 0; i < 6; i++){
const {title, year, month, date, tag, image, pass} = article[i];
const content =
`<article class="article-card">
<a href="${pass}">
<img src="/no-image.png" alt="ヘッダー画像" width="100" height="100" class="article-card_img">
<p class="article-card_title">${title}</p>
<p class="article-card_day">${year}/${month}/${date}</p>
</a>
</article>`;
articleCardConteiner.insertAdjacentHTML('beforeend', content);
};
}
}
自分で試したこと
AIに頼んで解決しようとしたがなにもできなかった。
それっぽい記事は出てきたもののうまく対処につなぐことができなかった。
0
