jQueryのforを使いinputを10個生成したのですが、各要素に対して各jsonの値を持たせたい場合、どう記述すれば良いのでしょうか。
※jsonはajaxで取得しています

■やりたいこと
--------- jsで以下を生成 ---------
<input type="radio" data-price="">
<input type="radio" data-price="">
<input type="radio" data-price="">
<input type="radio" data-price="">
<input type="radio" data-price="">
.
.
.

1つめの要素のdata属性には、(json["stone_01"]["price"])を持たせ、
2つめの要素のdata属性には、(json["stone_02"]["price"])を......

という感じです。

1つずつ直接、inputのdataに値を流し込めば済む話ですが、宜しくお願い致します。

■js

  function create_input() {
    $.ajax({
        type: 'GET',
        url: 'items.json',
        dataType: 'json'
      })
      .then(
        function(json) {
          for (var i = 1; i <= 10; i++) {
            $('<label for=""><input type="radio" name="left_input" id="" class="left_radio" data-price=""><img src="" alt=""></label>')
              .addClass('color-' + i.toString())
              .attr('for', 'left-input-' + i.toString())
              .appendTo('.left-input-set')
              .find('input')
              .attr('id', 'left-input-' + i.toString())
              .val('left_' + i.toString())
              .next('img')
              .attr('src', '/assets/img/l_select_' + i.toString() + '.png')
              .addClass('input_img');
          }
        },
        function() {
          alert('再読み込みをして下さい。');
        }
      );
  }
  create_input();

■json

{
  "stone_01": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  },
  "stone_02": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  },
  "stone_03": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  },
  "stone_04": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  },
  "stone_05": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  },
  "stone_06": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  },
  "stone_07": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  },
  "stone_08": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  },
  "stone_09": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  },
  "stone_10": {
    "type": "hogehogeType",
    "name_en": "hogehoge",
    "name_jp": "テキスト",
    "price": "50,000",
    "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  }
}

x_x

2018/10/26 04:06

今はどのように記述してどこでつまずいているのでしょうか？

madoka9393

2018/10/26 04:08

現状のコードを質問文に追記してください。

euledge

2018/10/26 04:09

他の質問見ると vue.js使っているようですが本質問はvue.jsではないものでしょうか？

退会済みユーザー

2018/10/26 04:11

(1)確認ですが、jsonというのはjsonではなく、jsonをパース(デシリアライズ)したオブジェクトという認識ですがあっていますか？(2)また、直接値を書き換えない方法を知りたいということでしょうか？そのイメージがあまりわきません。「データの値が変わったら、htmlに反映さたい」というようなことをされたいのでしょうか？

yappi_tengen

2018/10/26 04:19

失礼致しました。コードを記入致しました。本質問はVue,jsの案件ではないです。

yappi_tengen

2018/10/26 04:21

各inputのdataの値はjsonで持っている状態なので、その値をそれぞれに代入したいという意図になっております。

yambejp

2018/10/26 04:25

現行のソースは受け取ったjsonデータを利用しているように見えないのですが、もし利用するとして元JSONのデータがどうなっていてどこをどう切り出して利用したいのか提示したほうがよいでしょう。受け取るJSONデータは10要素固定なのかとかも説明してもらわないと・・・

yappi_tengen

2018/10/26 04:33

言葉足らずですいません、、、 forでinputを生成する段階で、それぞれにjsonの値を代入したいと思っております。　また、jsonデータは10個固定になっております。

x_x

2018/10/26 04:35

提示のjsonにはjson["data_01"]["data"]がないのですが、どちらかが間違いでしょうか？

yambejp

2018/10/26 04:36

例だと、ラジオボタンの各data-price="0"にJSONから受け取った50,000を埋め込みたいということでしょうか？繰り返しになりますJSONのどこをinputのどこに当てはめたいかわかりません

yappi_tengen

2018/10/26 04:43

すいません、誤りだったので修正致しました。

yappi_tengen

2018/10/26 04:45

1つめのinputにはstone_01のpriceを、2つめのinputにはstone_02のpriceをという風に出力したいと思っております。

x_x

2018/10/26 04:46

json["stone_01"]["data"]と修正されましたがpriceが正しいのですか？

madoka9393

2018/10/26 05:02

「<input type="radio" data-price="">」の「data-price=""」に「json["stone_XX"]["price"]」をあてたいってことではないんですかね。　これであればinput生成時に「.attr('data-price', (パースしたjsonから["stone_XX"]["price"]を取得)」のような感じでできそうな気がしますが。

yappi_tengen

2018/10/26 05:31

こちら間違っていたので、dataをpriceに修正しました。

yappi_tengen

2018/10/26 05:32

仰る通り「data-price=""」に「json["stone_XX"]["price"]」を出力したいです。

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

回答3件

元のコードを改造するならこんな感じでしょうか？

JavaScript
1for (var i = 1; i <= 10; i++) {
2  var x = String(i).length != 1 ? i : "0"+i; //追加した行
3  $('<label for=""><input type="radio" name="left_input" id="" class="left_radio" data-price=""><img src="" alt=""></label>')
4    .addClass('color-' + i.toString())
5    .attr('for', 'left-input-' + i.toString())
6    .appendTo('.left-input-set')
7    .find('input')
8    .attr('id', 'left-input-' + i.toString())
9    .attr('data-price', json[`stone_${x}`].price) //追加した行
10    .val('left_' + i.toString())
11    .next('img')
12    .attr('src', '/assets/img/l_select_' + i.toString() + '.png')
13    .addClass('input_img');
14}

投稿2018/10/26 06:15

madoka9393

総合スコア992

yappi_tengen

2018/10/29 02:39 編集

ありがとうございます！

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

ベストアンサー

for(var i in json)で回すかkeysをforEachでまわしてください
（わざわざfor(var i=0;i<10;i++）的なものは意味がないので）

javascript
1$(function(){
2  $.ajax({
3    url:"items.json",
4    dataType:"json",
5  }).done(function(json){
6    Object.keys(json).forEach(function(x){
7      console.log(json[x]);
8    });
9  });
10});

調整版

javascript
1<script>
2$(function(){
3  $.ajax({
4    url:"items.json",
5    dataType:"json",
6  }).done(function(json){
7    Object.keys(json).forEach(function(x,y){
8      var no=(y+1).toString();
9      var ra=$(`<input id="left-input-${no}" value="left_${no}" data-value="${json[x].price}">`)
10      var im=$(`<img src="/assets/img/l_select_${no}.png" class="input_img">`);
11      var la=$(`<label class="color-${no}" for="left-input-${no}">`);
12      la.append(ra,im).appendTo('.left-input-set');
13    });
14  });
15});
16</script>
17<div class="left-input-set"></div>

投稿2018/10/26 06:13

編集2018/10/26 07:32

yambejp

総合スコア114843

yappi_tengen

2018/10/26 07:06

ありがとうございます！参考にさせて頂きます！

yambejp

2018/10/26 07:33

調整版あげときました

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

setAttributeというメソッドが使えるかと。

以下のはサンプルです。ぱっとご確認いただけますん。
（※留意事項※ ご記載いただいたコードに適当に合わせてください）

こんなかんじ？

javascript
1    var json = `※jsonの文字列を張り付ける※`;
2    var dataDict = JSON.parse(json);
3
4    Object.keys(dataDict).forEach((key) => {
5        var data = dataDict[key];
6        let elem = document.createElement("input");
7        elem.setAttribute("data-price", data.price);
8        document.body.appendChild(elem);
9        document.body.appendChild(document.createElement("br"));
10    });
11

テキストに価格を表示させたいのであればこんなかんじ

javascript
1    var json = `※jsonの文字列を張り付ける※`;
2    var dataDict = JSON.parse(json);
3
4    Object.keys(dataDict).forEach((key) => {
5        var data = dataDict[key];
6        let elem = document.createElement("input");
7        elem.setAttribute("value", data.price);
8        document.body.appendChild(elem);
9        document.body.appendChild(document.createElement("br"));
10    });