質問: 次のように外部ファイルのJSONで項目を用意して、入れ子のfor文で出力したいのですが上手く表示できません。 `HTML-1` ``` ``` `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(出力後)` ``` タイトルA リストA1 リストA2 リストA3 リストA4 リストB1 リストB2 リストB3 リストC1 リストC2 タイトルB リストB1 リストB2 リストB3 リストC1 リストC2 タイトルC リストC1 リストC2 ``` `HTML-3(やりたい形)` ``` タイトルA リストA1 リストA2 リストA3 リストA4 タイトルB リストB1 リストB2 リストB3 タイトルC リストC1 リストC2 ``` HTML-1の16行目、 ``` $(".inner-list").append(div2); ``` を ``` $("#wrap").append(div2); ``` で記述すると項目はイメージ通りに出力されるのですが、構成上できればの中に入れたい状況です。 解決策と問題が起こっている理由も合わせてご教授頂けますと幸いです。 どうぞ宜しくお願い致します。
回答: `$("#wrap").append(div2);` にした場合は見た目はうまく行ってると思いますが、li は inner-list の内側ではなく、外側になっていませんか? `$(".inner-list")` としてしまうと、B以降ではそれまでに追加した inner-list にも追加してしまいます 今回の場合は文字列でHTML作ってるところが多いので、内側のfor文も含めてひとつの文字列にしてしまって、外側のfor文一回につき一回appendとするのが楽にできそうです ``` $.getJSON("../json/data.json", function(data){ for(var i in data){ var div = '' + data[i].titles + '' + '' + ''; for(var j in data[i].content){ div += '' + data[i].content[j].list + ''; } div += '' + ''; $("#wrap").append(div); } }); ```