htmlメソッドを使って取得したjsonデータを表示したい

コード
```### 前提・実現したいこと

jQueryを使い、ajaxで取得してきたjsonデータを
・$.each()
・.html()
のメソッドを使って<ul>の中に<li><p></p></li>を追加して表示させたいです。

kei344

2019/03/30 02:38

JSONがコードブロックに入っていません。バッククオート3つの前後には改行を入れてください。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

退会済みユーザー

2019/03/30 05:09

ご指摘ありがとうございます。修正いたしました。

kei344

2019/03/30 05:43

JSONがコードブロックに入っていませんよ。

kei344

2019/03/30 14:43

普通、要素を追加していく場合appendを利用しますが、appendメソッドを使うと問題がある理由も提示されてはいかがでしょう。

退会済みユーザー

2019/03/30 14:47

これは指定されたメソッドを使わなければいけない課題なんです。仰る通りappendメソッドを使えばすぐに見本と同じ実装をすることができました。 htmlメソッドを使ったやり方がまだよくわからないので手探り状態です

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

回答2件

ベストアンサー

どうしてもhtml()でやりたいなら変数にプールした上で最後に一気に
流し込んでください

javascript
1$(function() {
2  $.ajax({
3  url: './data.json',
4  type: 'GET',
5  dataType: 'json'
6  }).done(function(data) {
7    var html = "";
8    $.each(data.colorsArray,function(i,j) {
9      var color = j.hexValue;
10      var name = j.colorName;
11      html += '<li class="colorList__item"><p class="colorList__title" style="background-color: ' +color+ ';">' +name+ '</p></li>';
12    });
13    $('.colorList').html(html);
14  });
15});