ajax data.json

前提・実現したいこと

jsonファイルからデータを取り出してhtmlに表示させたいです。色々試してみましたが、やり方がわかりません。
.append()を使うと表示されるが.html()を使うと１つしか表示されないです。今回は.html()を利用して表示させるのが目的です。

data.jsonファイル

{
  "colorsArray": [
    {
      "colorName": "lightblue",
      "hexValue": "#ADD8E6"
    },
    {
      "colorName": "lightcoral",
      "hexValue": "#F08080"
    },
    {
      "colorName": "lightgreen",
      "hexValue": "#90EE90"
    },
    {
      "colorName": "lightsalmon",
      "hexValue": "#FFA07A"
    },
    {
      "colorName": "lightskyblue",
      "hexValue": "#87CEFA"
    },
    {
      "colorName": "lightpink",
      "hexValue": "#FFB6C1"
    },
    {
      "colorName": "lightseagreen",
      "hexValue": "#20B2AA"
    }
  ]
}

html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>jQuery</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="../../common/css/base.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapper">
  <ul class="colorList"></ul>
</div>
<script src="../../common/js/jquery.js"></script>
<script>

$.ajax({
  url: './data.json'
})
.done(function(data) {
// console.log(data)
    var colorsArray = data.colorsArray;
    // console.log(colorsArray)
    $.each(colorsArray, function(i){
      $('.colorList').html('<li class="colorList__item"> '+' <p class="colorList__title" style="background-color:'+colorsArray[i].hexValue+';"> '+ colorsArray[i].colorName +' </p> '+' </li>');
    });
  });
</script>
</body>
</html>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

.append()を使うと表示されるが.html()を使うと１つしか表示されないです。

それは、ループ毎に上書きし続けているわけですから、当然です。
今回はappendが適切とは思いますが、どうしてもというのでしたら、変数に貯めておいて.html()でしょうね。

例えば下記のような。

js
1    let list = "";
2    $.each(colorsArray, function(i){
3      list += '<li class="colorList__item"><p class="colorList__title" style="background-color:'+colorsArray[i].hexValue+';"> '+ colorsArray[i].colorName +' </p></li>';
4    });
5    $('.colorList').html(list);