jqueryで生成した各要素に対して、jsonの値を持たせたい

受け取った後の処理の書き方が全く分からず困っています。

html/jquery
1コード
2<!doctype html>
3<html>
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7    <meta name="format-detection" content="telephone=no">
8    <title>jQuery</title>
9    <link rel="stylesheet" href="../../common/css/reset.css">
10    <link rel="stylesheet" href="../../common/css/base.css">
11    <link rel="stylesheet" href="./css/style.css">
12  </head>
13  <body>
14    <div class="wrapper">
15      <ul class="colorList"></ul>
16    </div>
17    <script src="../../common/js/jquery.js"></script>
18    <script>
19 
20      $.ajax({
21        type: 'get',
22        url: './data.json'
23      })
24      .done(function(data) {
25        console.log(data)
26        $('.colorList').append('<li class="colorList__item">' + 
27        '<p class="colorList__title" style="background-color: ;">lightblue</p>' +
28        '</li>');
29        $('.colorList').append('<li class="colorList__item">' + 
30        '<p class="colorList__title" style="background-color: ;">lightcoral</p>' +
31        '</li>');
32        $('.colorList').append('<li class="colorList__item">' + 
33        '<p class="colorList__title" style="background-color: ;">lightgreen</p>' +
34        '</li>');
35         $('.colorList').append('<li class="colorList__item">' + 
36         '<p class="colorList__title" style="background-color: ;">lightsalmon</p>' +
37        '</li>');
38         $('.colorList').append('<li class="colorList__item">' + 
39         '<p class="colorList__title" style="background-color: ;">light</p>' +
40        '</li>');
41         $('.colorList').append('<li class="colorList__item">' + 
42         '<p class="colorList__title" style="background-color: ;">lightpink</p>' +
43        '</li>');
44        $('.colorList').append('<li class="colorList__item">' + 
45         '<p class="colorList__title" style="background-color: ;">lightseagreen</p>' +
46        '</li>');
47      });
48    </script>
49  </body>
50</html>

json
1コード
2{
3  "colorsArray": [
4    {
5      "colorName": "lightblue",
6      "hexValue": "#ADD8E6"
7    },
8    {
9      "colorName": "lightcoral",
10      "hexValue": "#F08080"
11    },
12    {
13      "colorName": "lightgreen",
14      "hexValue": "#90EE90"
15    },
16    {
17      "colorName": "lightsalmon",
18      "hexValue": "#FFA07A"
19    },
20    {
21      "colorName": "lightskyblue",
22      "hexValue": "#87CEFA"
23    },
24    {
25      "colorName": "lightpink",
26      "hexValue": "#FFB6C1"
27    },
28    {
29      "colorName": "lightseagreen",
30      "hexValue": "#20B2AA"
31    }
32  ]
33}

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

回答1件

ベストアンサー

こんなかんじ

javascript
1<script>
2$(function(){
3  $.ajax({
4  type: 'get',
5  url: 'y.php',
6  dataType:'json',
7  }).done(function(data) {
8    $.each(data.colorsArray,function(){
9      $('.colorList').append(
10        $('<li>').addClass('colorList__item').append(
11          $('<p>').addClass('colorList__title').css('background-color',$(this)[0].hexValue).text($(this)[0].colorName)
12        )
13      );
14    });
15  });
16});
17</script>
18<div class="wrapper">
19<ul class="colorList"></ul>
20</div>