質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • JavaScript

    15875questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • JSON

    1109questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 244

AtyuNakamura

score 24

下記のような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県


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+3

ご提示の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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/22 16:18

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

    キャンセル

  • 2018/06/22 16:23

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

    キャンセル

  • 2018/06/22 16:55

    sampleつけときました

    キャンセル

  • 2018/06/22 23:31

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

    キャンセル

checkベストアンサー

+1

結果として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>
*/


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/22 23:32

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/22 23:34

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

    キャンセル

0

こんなのが有ります。

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15875questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • JSON

    1109questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。