配列オブジェクトからHTMLのリストを表示させたい

Question

はじめまして。今JavaScriptを勉強しているものです。
はじめて、teratailを使わさせて頂きました。

下記の様な配列オブジェクトがあります。

const array = [
    {
      key: "A", 
      value: ['<div><span>a</span></div>', '<div><span>a</span></div>']
    },
    {
      key: "B", 
      value: ['<div><span>a</span></div>', '<div><span>a</span></div>', '<div><span>a</span></div>']
    },
    {
      key: "C", 
      value: ['<div><span>a</span></div>', '<div><span>a</span></div>', '<div><span>a</span></div>', '<div><span>a</span></div>']
    },
    {
      key: "D", 
      value: ['<div><span>a</span></div>', '<div><span>a</span></div>']
    }
   ];

この配列オブジェクトを使ってHTMLでリスト表示させたいのですが、どの様にループ処理させれば良いのかがわからない状態で悩んでおります。

keyの部分は、リストのタイトル<h2>にしたく、valueの部分は、<li>で作りたいです。表示したい順序も配列のそのままで表示したくご教示頂けませんでしょうか。

下記の様にmapで出来るのかと考えてみたのですがわからない状態です。

const html = array.map(([k, l]) => `
  <ul>
  <li class="list">${k}<li>
  ${l.map(n => `<ul><li class="listend">${n}</li></ul>`).join('')}
</ul>`);

出力したいHTMLですが、

<div id="sub"><--!ここにJSからのhtmlを入れたいです--></div>

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[yambejp]

liにdivを流し込むんですか？
親はulですか？

[退会済みユーザー]

只今、試してみたコードを追加いたしました。

[yambejp]

回答はしましたが、最終形がみえません
出力したいHTMLのサンプルをつけてください

[退会済みユーザー]

htmlも追加してみました。

[miyabi_pudding]

yambejpさんのコメントをよく見てください。

> 最終形がみえません

ということは、中身を入れたいHTMLを提示するのではなく、
最終的にどういう構造のHTMLにしたいか、の最終の形式を提示をして下さい、っていうことです。

つまり、現状ではなく、理想とするHTMLの出力結果を提示して下さい、ってことです。

Answer 1

こんにちは。一例としまして、こんな感じでいかがでしょうか？

  const obj2html = ({ key, value }) => {
    const header = `<h2>${key}</h2>\n`;
    const items = value.map(div => `<li>${div}</li>\n`).join('');
    return `${header}<ul>\n${items}</ul>`;
  };
  
  document.querySelector('#sub').innerHTML = array.map(obj2html).join('\n');

• 動作確認用codepen: https://codepen.io/jun68ykt/pen/BaKBzQJ

Answer 2

この場合はmapの実引数に渡されるのは配列ではなくオブジェクトなので、オブジェクトの分割代入を利用しないと実行時にエラーが発生して処理が行えません。

オブジェクトの分割代入

const html = array.map(({key, value}) => `
  <ul>
  <li class="list">${key}<li>
  ${value.map(n => `<ul><li class="listend">${n}</li></ul>`).join('')}
</ul>`);

Answer 3

追記部分でむしろ何がしたいかわからなくなりました

Comments

[yambejp]

window.addEventListener('DOMContentLoaded', ()=>{
array.forEach(x=>{
[Object.assign(document.createElement('h2'),{textContent:x.key}),
x.value.reduce((x,y)=>(x.appendChild(Object.assign(document.createElement('li'),{innerHTML:y})),x),document.createElement('ul')),
].forEach(x=>{
document.querySelector('body').appendChild(x);
});
});
});