jsonファイルからAjaxを用いてJqueryで値を取り出してDOM要素を書き換えるプログラムを実装しています。下記が完成形のページの内容です。
![

下記に記したコードの内容でjsonから受け取った配列の値("colorsArray")の中身をjqueryにて繰り返し処理で順番に取り出してHTMLの内容を変更させたいのですが完成形のように上手くいきません。

[コードの条件]
・html要素の書き換えは不可
・最低限下記３つのメソッドを使用
$.each
.html()
$.ajax({})

該当のソースコード

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6    <meta name="format-detection" content="telephone=no">
7    <title>jQuery</title>
8    <link rel="stylesheet" href="../../common/css/reset.css">
9    <link rel="stylesheet" href="../../common/css/base.css">
10    <link rel="stylesheet" href="./css/style.css">
11  </head>
12  <body>
13    <div class="wrapper">
14      <ul class="colorList"></ul>
15    </div>
16    <script src="../../common/js/jquery.js"></script>
17    <script>
18      $(function(){
19        $.ajax({
20          url: './data.json',
21          type: "GET",
22        }).done(function(data) {
23          for (var i=0; i<$(data.colorsArray).length; i++){
24            var array_color = [data.colorsArray[i].colorName];
25            var array_hex = [data.colorsArray[i].hexValue];
26            $(".colorList").append('<li class="colorList__item"></li>')
27            $(".colorList__item").html('<p class="colorList__title" style="background-color: ;"></p>')
28          }
29
30          $.each(array_color, function(key, value) {
31            $(".colorList__item").html('<p class="colorList__title" style="background-color: ;">' + array_color + '</p>')
32            $(".colorList__title").css('background-color',array_hex)
33          });
34        });
35      });
36      // [追加するリストのテンプレート]
37      // <li class="colorList__item">
38      //   <p class="colorList__title" style="background-color: ;"></p>
39      // </li>
40    </script>
41  </body>
42</html>

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

css
1.clearfix:after {
2  display: block;
3  clear: both;
4  content: '';
5}
6.wrapper {
7  padding: 20px;
8}
9.colorList {
10  padding: 10px;
11  background-color: #fff;
12  box-shadow: 0 0 10px #ccc;
13}
14.colorList__item + .colorList__item {
15  margin-top: 10px;
16}
17.colorList__title {
18  padding: 10px;
19  color: #fff;
20  box-shadow: 0 0 2px #999 inset;
21}

具体的には、for文にてjsonファイルの"colorsArray"の中身である"colorName"と"hexValue"を順番に取り出し、指定のpタグにそれぞれ代入したいと考えてます。

<p class="colorList__title" style="background-color: ;"></p> pタグの文字列に"colorsName"の値。 pタグの'background-color'に"hexValue"の値

以上です。解決策をご教授頂ければ幸いです。
よろしくお願い致します。

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

回答1件

ベストアンサー

こんなふうにしてみては？

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

調整

ああ、はいはい条件ね・・・

javascript
1$(function(){
2  $.ajax({
3  url: './data.json',
4  type: "GET",
5  dataType: "json",
6  }).done(function(data) {
7    $.each(data.colorsArray,function(x){
8      $(".colorList").append(
9        $('<li>').addClass('colorList__item').append(
10          $('<p>').addClass('colorList__title').css('backgroundColor',$(this).get(0).hexValue).html($(this).get(0).colorName)
11        )
12      )
13    });
14  });
15});