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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3401閲覧

htmlのidとjsonのidを対応させて値を取得したい

mo_mo

総合スコア5

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/05/18 04:26

前提・実現したいこと

jqueryを利用してjsonを読み込みます。
HTMLに商品リストがあってその商品idに対応した値段の取得をしたいです。

発生している問題・エラーメッセージ

商品は複数あってセレクトで選んだ日数と商品idのリストを送信するとjasonがidと値段がセットになって返ってきます。そのときjsonの並びはばらばらなのでHTMLと対応させるのにどうしたらいいか
書き方がわかりません。

該当のソースコード


HTML

<select class="day"> <option value="1">1泊2日</option> <option value="2">2泊3日</option> <option value="3">3泊4日</option> </select> <ul class="item-list"> <li id="iteme_id_1"> <p class="img"><a href="#"><img></a></p> <h4><a href="#">商品名リンク</a></h4> <p class="txt">説明テキスト説明テキスト</p> <p class="price">税込 &yen;0,000</p> </li> <li id="iteme_id_10"> <p class="img"><a href="#"><img></a></p> <h4><a href="#">商品名リンク</a></h4> <p class="txt">説明テキスト説明テキスト</p> <p class="price">税込 &yen;0,000</p> </li> <li id="iteme_id_30"> <p class="img"><a href="#"><img></a></p> <h4><a href="#">商品名リンク</a></h4> <p class="txt">説明テキスト説明テキスト</p> <p class="price">税込 &yen;0,000</p> </li> ---------------------------------- js ------------------------------------- var item_id_list = []; item_list.each(function() { var ids = $(this).attr('id').replace('iteme_id_', ''); item_id_list.push(ids); }); function call(days,item_list){ $.ajax({ url: apiurl, type: 'POST', data: { "days": days, "item_id_list": item_id_list }, dataType: 'json', cache: false, timeout: 1000,

}).done(function(data) {
// 通信成功時の処理
}).fail(function() {
// 通信失敗時の処理
}).always(function() {
});
}
//日数の取得
$(".day").change(function() {
var days = $(this).val();
var item_list=$(this).closest('.parts').find('.parts-item-list li');
call(days,item_list);

});

json

{
"success": true,
"prices": [
{
"item_id": 10,
"price": 1000
},
{
"item_id": 30,
"price": 2000
},
{
"item_id": 1,
"price": 3000
}
]
}

試したこと

data.prices.each(function() {}でいけないかなと思ったのですがだめですよね・・・

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

もともと商品idで引いてきているのなら、それを使ってマッチさせられるのでは?

-- 14:00追記

JavaScript

1data.prices.forEach(i => { 2 const li = document.getElementById('iteme_id_' + i.item_id.toString()); 3 li.querySelector('.price').innerHTML = '税込 &#xa5;' + i.price.toString(); 4});

,が入っていませんが、そこは頑張ってください

投稿2018/05/18 04:31

編集2018/05/18 05:01
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mo_mo

2018/05/18 04:35

そのマッチのさせかたがわからないんです
x_x

2018/05/18 04:39

何をしたいのかが示されていないので、ただ取るだけ。 data.prices.forEach(i => document.getElementById('iteme_id_' + i.item_id.toString()));
mo_mo

2018/05/18 04:50

ありがとございます。 したいことはitem_id": 10だったら<li id="iteme_id_10">の<p class="price">税込 &yen;0,000</p>を<p class="price">税込 &yen;1,000</p>に、その他かえってきている2件分も同様に対応した<li>内のpriceをjson参照して書き換えたいんです。
mo_mo

2018/05/18 05:37

ありがとうございます。 やりたいことは実現できてました。 ただUncaught TypeError: Cannot read property 'querySelector' of nullというエラーになってしまってます。これは気にしなくてもいいんでしょうか?
x_x

2018/05/18 07:43

HTMLにないidが返ってきているのでしょうか? 存在チェックを入れたほうがいいかもしれません。
mo_mo

2018/05/18 08:07

ああ、なるほどです。jsonのidとhtmlが合わないとこうなるのですね。 ちなみになんですがdata.pricesでforEachがまわせるのであれば最初やろうとしたjqueryの書き方 data.prices.each(function(i) { ・・・・ }); がUncaught TypeError: data.prices.each is not a functionになるのがなぜだか腑に落ちていません。 単純に私の知識が足りないんだと思うんですけど、もしおわかりでしたら教えていただけないでしょうか?
x_x

2018/05/18 08:13

jQueryと混同しているのだと思いますが、data.pricesはJavaScriptの配列で、jQueryオブジェクトではありません。 しかし、jQueryにはjQuery.each()も存在するため、次のような形式なら書けるでしょう。 $.each(data.prices, function(index, value) { ... }); https://api.jquery.com/jQuery.each/
mo_mo

2018/05/18 14:54

ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問