jsの配列内ののオブジェクトをループさせる方法

Question

        const TARGET = [
            {'AB12': [{name: "山田", id: "1234"}, {name: "田中", id: "5678"}]},
            {'CD34': [{name: "佐藤", id: "98765"},{name: "鈴木", id: "8888888"}]}
           ]
        
        const data = TARGET.filter(el => el.hasOwnProperty(ID));
        const dataForLoop = Object.values(data)
        for(let i = 0; i < dataForLoop.length; i++) {
            console.log(dataForLoop.name);
            console.log(dataForLoop.id);
        }

やりたいこととしてはconst data = TARGET.filter(el => el.hasOwnProperty(ID));で入れるIDによって表示を切り替えたいです
例　IDがAB12の場合
山田
1234
田中
5678

IDがCD34の場合
佐藤
98765
鈴木
8888888
のように表示させたいのですがどのようにすれば良いでしょうか？
教えてください

Comments

[m.ts10806]

現状のコードにおける問題点は何でしょうか。

Answer 1

var id="AB12";
TARGET.filter(x=>Object.keys(x).includes(id)).forEach(x=>{
  x[id].forEach(y=>{;
    console.log(y.name);
    console.log(y.id);
  });
});

Comments

[ponpon00]

しっかり動きました
迅速で完璧な対応ありがとうございました

[yambejp]

ちなみに、こんな感じで両方のIDを持つ可能性もあるので、それを考慮した書き方になっています

const TARGET = [
{'AB12': [{name: "山田", id: "1234"}, {name: "田中", id: "5678"}]},
{'CD34': [{name: "佐藤", id: "98765"},{name: "鈴木", id: "8888888"}]},
{'AB12': [{name: "松原", id: "59"}, {name: "坂本", id: "6"}],
'CD34': [{name: "丸", id: "8"},{name: "岡本", id: "25"}]},
];

[ponpon00]

もう１つ質問させていただきたいのですが
これをテンプレートリテラルとして使いたいのですが
const content =
TARGET.filter(x=>Object.keys(x).includes(hasSchoolId)).forEach(x=>{
x[hasSchoolId].forEach(y=>{
`
<li class="item">
<div class="movie-item-id">${y.id}</div>
<div class="movie-item-name">${y.name}</div>
</li>
`
});
});

......insertAdjacentHTML('afterbegin', content);
みたいな使い方を想定していたのですがこれでは使うことはできませんか？

[yambejp]

あらかじめ<ul id="hoge"></li>をつくっておいて
var id="AB12";
var content="";
TARGET.filter(x=>Object.keys(x).includes(id)).forEach(x=>{
x[id].forEach(y=>{;
content+=
`<li class="item">
<div class="movie-item-id">${y.id}</div>
<div class="movie-item-name">${y.name}</div>
</li>`;
});
});
document.querySelector('#hoge').insertAdjacentHTML('afterbegin',content);

みたいな感じで

[ponpon00]

ありがとうございます！