ど～～してもValue値が取得できない（配列中の複数オブジェクト、そのオブジェクト中の配列中の複数オブジェクト）
Q&A
Closed
やりたいこと
配列データから取得して
1.会社ごとのボックスをループ生成（ここまでは自力でできた）
2.その生成されたボックスの中で、更に複数のリストをループ生成
3.最終的には下記「実際のテストコード」html でコメントアウトしてあるソースコードのように生成
ボックス1の中身
会社Ａ：
リスト1 文書名Ａ1・・・
リスト2 文書名Ａ2・・・
ボックス2の中身
会社Ｂ：
リスト1 文書名Ｂ1・・・
リスト2 文書名Ｂ2・・・
実際のテストコード：https://codepen.io/e-at/pen/poVXaXP
どうしても解決できない問題
forEach ループで生成された box の中で更に ul の中にリストをループ生成することができず、またリストのelement 自体は何とか生成できてもループされておらず、しかも値がundefined になってしまいます。
配列やオブジェクトが入り混じっているデータ自体の作成方法が悪いのかもしれません。その判別も今いちよくわかっていません。
約1週間ほど毎日少しずつ、いろいろトライしてますが初心者の私にはどうしても解決できません。
どうか、知恵をお貸しください！どうぞ、よろしくお願いします。
該当するソースコード
const datas = [
{
tagName: 'A',
companyName: 'A corporation',
documents: [
{
documentName: 'document A-1',
version: 'Ver.A 1.0',
issued: '2022/01',
},
{
documentName: 'document A-2',
version: 'Ver.A 2.0',
issued: '2022/02',
},
],
},
{
tagName: 'B',
companyName: 'B corporation',
documents: [
{
documentName: 'document B-1',
version: 'Ver.B 1.0',
issued: '2022/03',
},
{
documentName: 'document B-2',
version: 'Ver.B 2.0',
issued: '2022/04',
},
],
},
];
const boxes = document.querySelector('#boxes');
const createBox = data => {
const box = document.createElement('div');
box.classList.add('box');
box.innerHTML = `
<p>${data.tagName}</p>
<h3>${data.companyName}</h3>
<ul class="documents">${createDocList(data.documents)}</ul>
`;
boxes.appendChild(box);
};
const createDocList = doc => {
const li = document.createElement('li');
return (li.innerHTML = `
<li>${doc.documentName}</li>
`);
};
datas.forEach(data => {
createBox(data);
});
0
