質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.55%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 665

yappi_tengen

score 15

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": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • madoka9393

    2018/10/26 14: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 14:31

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

    キャンセル

  • yappi_tengen

    2018/10/26 14:32

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

    キャンセル

回答 3

checkベストアンサー

+1

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

$(function(){
  $.ajax({
    url:"items.json",
    dataType:"json",
  }).done(function(json){
    Object.keys(json).forEach(function(x){
      console.log(json[x]);
    });
  });
});

 調整版

<script>
$(function(){
  $.ajax({
    url:"items.json",
    dataType:"json",
  }).done(function(json){
    Object.keys(json).forEach(function(x,y){
      var no=(y+1).toString();
      var ra=$(`<input id="left-input-${no}" value="left_${no}" data-value="${json[x].price}">`)
      var im=$(`<img src="/assets/img/l_select_${no}.png" class="input_img">`);
      var la=$(`<label class="color-${no}" for="left-input-${no}">`);
      la.append(ra,im).appendTo('.left-input-set');
    });
  });
});
</script>
<div class="left-input-set"></div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/26 16:06

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

    キャンセル

  • 2018/10/26 16:33

    調整版あげときました

    キャンセル

+1

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

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

こんなかんじ?

    var json = `※jsonの文字列を張り付ける※`;
    var dataDict = JSON.parse(json);

    Object.keys(dataDict).forEach((key) => {
        var data = dataDict[key];
        let elem = document.createElement("input");
        elem.setAttribute("data-price", data.price);
        document.body.appendChild(elem);
        document.body.appendChild(document.createElement("br"));
    });

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

    var json = `※jsonの文字列を張り付ける※`;
    var dataDict = JSON.parse(json);

    Object.keys(dataDict).forEach((key) => {
        var data = dataDict[key];
        let elem = document.createElement("input");
        elem.setAttribute("value", data.price);
        document.body.appendChild(elem);
        document.body.appendChild(document.createElement("br"));
    });

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/26 14:33

    ありがとうございます! コードを参考にさせて頂き、ローカルでいじってみます!

    キャンセル

  • 2018/10/26 14:35

    はい。要点は`.setAttribute("data-price", data.price);`という部分で、属性名とその値を指定してあげればいいです。

    キャンセル

+1

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

for (var i = 1; i <= 10; i++) {
  var x = String(i).length != 1 ? i : "0"+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())
    .attr('data-price', json[`stone_${x}`].price) //追加した行
    .val('left_' + i.toString())
    .next('img')
    .attr('src', '/assets/img/l_select_' + i.toString() + '.png')
    .addClass('input_img');
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/26 16:08 編集

    ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる