Array of object :
const users = [{
id: 1,
name: "Sakura Miko"
}, {
id: 2,
name: "Usada Pekora"
}];
Convert to DOM :
const html = `<ul>
${users.map(user => `<li>${user.name}</li>`).join("")}
</ul>`;
console.log(html);
//
<ul>
<li>Sakura Miko</li><li>Usada Pekora</li>
</ul>
.join(“”)を忘れないようにしましょう。
Array.map(callback)はブラウザが読み込む際に、自動的に.toString() を実行して”,”区切りのStringにしてしまいます。
DOM生成時、”, ”は入れたくないので、自分でglueを””に指定して文字列にします。
コメントを書く