JSONデータを入れ子のfor文で正しく出力できない

次のように外部ファイルのJSONで項目を用意して、入れ子のfor文で出力したいのですが上手く表示できません。

HTML-1

<div id="wrap">
  <script type="text/javascript">
    $(document).ready(function () {
      $.getJSON("../json/data.json", function(data){
        for(var i in data{
          var div1 = '<h5>'
                   + data[i].titles
                   + '</h5>'
                   + '<div class="box">'
                   + '<ul class="inner-list">';	
          $("#wrap").append(div1);
          for(var j in data[i].content){
		  var div2 = '<li>'
		           + data[i].content[j].list
		           + '</li>';
            $(".inner-list").append(div2);
           }
          var div3h = '</ul>'
                    + '</div>';
        $("#wrap").append(div3);
       }
     });
    });
 </script>
</div>

data.json

[
  {
    "titles": "タイトルA",
    "content": [
      {"list": "リストA1"},
      {"list": "リストA2"},
      {"list": "リストA3"},
      {"list": "リストA4"}
    ]
  },
  {
    "titles": "タイトルB",
    "content": [
      {"list": "リストB1"},
      {"list": "リストB2"},
      {"list": "リストB3"}
    ]
  },
  {
    "titles": "タイトルC",
    "content": [
      {"list": "リストC1"},
      {"list": "リストC2"}
    ]
  }
]

HTML-2（出力後）

<div id="wrap">
 <h5>タイトルA</h5>
 <div class="box">
  <ul class="inner-list">
   <li>リストA1</li>
   <li>リストA2</li>
   <li>リストA3</li>
   <li>リストA4</li>
   <li>リストB1</li>
   <li>リストB2</li>
   <li>リストB3</li>
   <li>リストC1</li>
   <li>リストC2</li>
  </ul>
 </div>
 <h5>タイトルB</h5>
 <div class="box">
  <ul class="inner-list">
   <li>リストB1</li>
   <li>リストB2</li>
   <li>リストB3</li>
   <li>リストC1</li>
   <li>リストC2</li>
  </ul>
 </div>
 <h5>タイトルC</h5>
 <div class="box">
  <ul class="inner-list">
   <li>リストC1</li>
   <li>リストC2</li>
  </ul>
 </div>
</div>

HTML-3（やりたい形）

<div id="wrap">
 <h5>タイトルA</h5>
 <div class="box">
  <ul class="inner-list">
   <li>リストA1</li>
   <li>リストA2</li>
   <li>リストA3</li>
   <li>リストA4</li>
  </ul>
 </div>
 <h5>タイトルB</h5>
 <div class="box">
  <ul class="inner-list">
   <li>リストB1</li>
   <li>リストB2</li>
   <li>リストB3</li>
  </ul>
 </div>
 <h5>タイトルC</h5>
 <div class="box">
  <ul class="inner-list">
   <li>リストC1</li>
   <li>リストC2</li>
  </ul>
 </div>
</div>

HTML-1の16行目、

$(".inner-list").append(div2);

を

$("#wrap").append(div2);

で記述すると項目はイメージ通りに出力されるのですが、構成上できれば<div class="box">の中に入れたい状況です。

解決策と問題が起こっている理由も合わせてご教授頂けますと幸いです。

どうぞ宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

$("#wrap").append(div2); にした場合は見た目はうまく行ってると思いますが、li は inner-list の内側ではなく、外側になっていませんか？
$(".inner-list") としてしまうと、B以降ではそれまでに追加した inner-list にも追加してしまいます

今回の場合は文字列でHTML作ってるところが多いので、内側のfor文も含めてひとつの文字列にしてしまって、外側のfor文一回につき一回appendとするのが楽にできそうです

javascript
1$.getJSON("../json/data.json", function(data){
2	for(var i in data){
3		var div = '<h5>'
4			+ data[i].titles
5			+ '</h5>'
6			+ '<div class="box">'
7			+ '<ul class="inner-list">';
8		for(var j in data[i].content){
9			div += '<li>'
10			+ data[i].content[j].list
11			+ '</li>';
12		}
13		div += '</ul>'
14		+ '</div>';
15		$("#wrap").append(div);
16	}
17});

投稿2016/03/27 03:29

ryls-nmm

総合スコア633

s_ogawa

2016/03/27 04:03

丁寧な解説ありがとうございました、ご提案頂いた方法で無事に解決できました。仰られる通り、$("#wrap").append(div2);の場合はinner-listの外側になってしまうので、そこからinner-listの内側に持っていくようなアプローチを考えていたのですが上手くいかず困っていたところでした。 for文を丸ごと変数内に入れるのは思いつかなかったので勉強になりました。この度はありがとうございました。

行動規範の内容に同意します