入れ子になっているjsonを取得して配列に格納したい

Question

下記のようなjsonを取得して配列に格納し、

    var json =
    [
      {
        num: 1,
        name: 'A県',
        AList:
        [
          {
            num: 1,
            name: 'A社',
            BList:
              [
                {
                  num: 1,
                  name: 'A課',
                },
                {
                  num: 2,
                  name: 'B課',
                },
              ]
          },
          {
            num: 2,
            name: 'B社',
            BList: 
              [
              ]
          }
        ]
      },
      {
        num: 2,
        name: 'B県',
      }
    ];

下記のようなlist

list
A県
　┗A社
　　　　┗A課
　　　　┗B課
　┗B社
B県

を作成したいのですが、
配列にうまく格納できなく困っています。
（階層が深くなる部分までは取得できたのですが、浅く戻るタイミングでおかしくなり、やり直しているところです・・・）
このサイトを参考にすると良い、等あればご教授頂きたいです。

Answer 1

ご提示のHTMLは不適格です
ネストのulはliの中に入らないとリストになりません

確認

<ul>
<li>A県
  <ul>
  <li>A社
    <ul>
      <li>A課</li>
      <li>B課</li>
    </ul>
  </li>
  <li>B社</li>
  </ul>
</li>
<li>B県</li>
</ul>

で大丈夫ですか？これをjavascriptで組み立てればよいですか？

sample

<script>
var json =
    [
      {
        num: 1,
        name: 'A県',
        AList:
        [
          {
            num: 1,
            name: 'A社',
            BList:
              [
                {
                  num: 1,
                  name: 'A課',
                },
                {
                  num: 2,
                  name: 'B課',
                },
              ]
          },
          {
            num: 2,
            name: 'B社',
            BList: 
              [
              ]
          }
        ]
      },
      {
        num: 2,
        name: 'B県',
      }
    ];
window.addEventListener('DOMContentLoaded', function(e){

var div=document.querySelector("#viewarea");
var ul1=document.createElement("ul");
  div.appendChild(ul1);
  for(var i=0;i<json.length;i++){
    var li1=document.createElement("li");
    ul1.appendChild(li1);
    li1.appendChild(document.createTextNode(json[i].name));
    if(typeof json[i].AList!=="undefined"){
      var ul2=document.createElement("ul");
      li1.appendChild(ul2);
      for(var j=0;j<json[i].AList.length;j++){
        var li2=document.createElement("li");
        li2.appendChild(document.createTextNode(json[i].AList[j].name));
        ul2.appendChild(li2);
        if(typeof json[i].AList[j].BList!=="undefined"){
          var ul3=document.createElement("ul");
          li2.appendChild(ul3);
          for(var k=0;k<json[i].AList[j].BList.length;k++){
            var li3=document.createElement("li");
            li3.appendChild(document.createTextNode(json[i].AList[j].BList[k].name));
            ul3.appendChild(li3);
          }
        }
      }
    }
  }
});
</script>

<div id="viewarea"></div>

Comments

[OrangeHanzo]

あ、すみませんまだHTML組み立ててなかったので間違えてました。
消しておきます。

[OrangeHanzo]

はい！上記の形で間違いございません！
配列への格納に失敗しており、ご教授いただけると嬉しいです。。

[yambejp]

sampleつけときました

[OrangeHanzo]

ご教授ありがとうございます！
実行確認出来ました！

Answer 2

こんなのが有ります。

GitHub - suskind/json2html-list: Converts JSON to HTML UL-LI list

呼び出し方とかは、sample.htmlを見て下さい。

結構複雑なJSONでも綺麗に整形してくれます。

Answer 3

結果としてDOMツリーを作ってるんだから、「HtmlElementを作る→子供のElementをappendする」というのを再帰的に回してあげればいいのでは。

例えば、

function tree(parentElement, array){

  if(!array){
    return parentElement;
  }

  for(let i = 0; i < array.length; i++){
    let child = array[i];

    let li = document.createElement('li');
    li.textContent = child.name;
    parentElement.append(li);


    let ul = document.createElement('ul');
    ul = tree(ul, child.AList);
    ul = tree(ul, child.BList);
    parentElement.append(ul);
  }
  return parentElement;
};

↑こんな風にfunction作ってあげると、

let root = document.createElement('ul');
root = tree(root, json);

/*
<ul>
  <li>A県</li>
  <ul>
    <li>A社</li>

    <ul>
      <li>A課</li>
      <ul></ul>
      <li>B課</li>
      <ul></ul>
    </ul>
    <li>B社</li>
    <ul></ul>
  </ul>
  <li>B県</li>
  <ul></ul>
</ul>
*/

↑こんな感じでツリー構造が作れる。

Comments

[OrangeHanzo]

ご教授ありがとうございます！
理想の形で出力されました！

Answer 4

json to html
json to table
とかで検索するとライブラリー有りますよ。
出先なので、詳しくは後ほど。

Comments

[OrangeHanzo]

情報ありがとうございます！！
こんなものが・・・！！
参考にさせて頂きます！
こちら解決してから色々とテコを入れないといけないため、改善しやすいコードをにできればと考えてます！