選択した項目のjsonプロパティのvalueの値を変数に代入し表示したい。

選択した項目の、オブジェクトのプロパティの２つめのデータ(数字)を変数に代入して、
出力したいのですが、$(x.list)にしてみたり色々しているのですが、うまくできません。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7
8<title></title>
9
10</head>
11
12<body>
13  
14  <input type="text" id="wrap" list="list">
15
16
17    <script type="text/javascript">
18      $.getJSON("data1.json", function(sample_list){
19          var d=$('<datalist id="list">').append(sample_list.map(x=>$(`<option value="${x.list}">${x.value}</option>`)));
20          $("input#wrap").append(d);
21            
22          $('input').change(function() {
23            
24
25            var subvalue = $(this).val();
26            $("#subresult1").text(subvalue)
27          });
28
29      });
30    </script>
31  <p id="subresult1">ここに表示</p>
32  
33  
34
35</body>
36</html>

json
1[
2  {
3    "list": "あA",
4    "value": "300"
5  },
6  {
7    "list": "いB",
8    "value": "1000"
9  },
10  {
11    "list": "うC",
12    "value": "2000"
13  }
14]
15

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

回答2件

ベストアンサー

こういうことですかね？

投稿2020/09/24 07:03

yambejp

総合スコア116726

yambejp

2020/09/24 07:03

$(function(){ $.when($.getJSON("data1.json", function(sample_list){ var d=$('<datalist id="list">').append(sample_list.map(x=>$(`<option value="${x.list}">${x.value}</option>`))); $("input#wrap").append(d); })).done(function(data){ $('input').on('change',function() { var val=$(this).val(); var subvalue = data.filter(x=>x.list==val)[0]?.value||""; $("#subresult1").text(subvalue); }); }); });

Miii

2020/09/24 07:40

動きました！ありがとうございます！ var subvalue = data.filter(x=>x.list==val)[0]?.value||"";の行すごいですね！他の行については、調べてなんとなく理解できたのですが、 ?によってif文表記できるのですね！この1行はif文、そして、値がない時は表示も空白になることから、 else文が含まれているのでしょうか？また、[0]というのは、何を表しているのでしょうか？ 1をいれてみたりして検証しようと思ったのですが、consoleで表示しようにも、わからなくて・・・ご教授いただければ幸いです。

yambejp

2020/09/24 07:55

この場合dataは外部から受けとったjsonオブジェクトが入っています。それをval＝inputのval値をつかってフィルタを掛けるので一致する場合とそうでない場合があります一致する場合filterされたものは配列ですから[0]で参照できます。一致しない場合は[0]がundefinedなのでvalueが参照できず代替値として""を指定しています

Miii

2020/09/24 08:09

jsonデータのプロパティ追加して、3つめ指定して表示されるようにもできました！詳しく教えてくださって、ありがとうございます！

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

ブラウザの開発者ツールで何かエラーが出ていないでしょうか。
getJSONでローカルファイルにHTTPリクエストとしてアクセスするとセキュリティ的な問題でCORSエラーとなります。
こちらのページなどで紹介されているようにローカルサーバを建ててHTTPからアクセスすれば、
このソースで動作は確認できました。
【Ajax】ローカルファイルを読み込もうとしたらCORSエラーが発生したので解決した

追記
問題はそちらでしたか。それならばinput.change部分を

javascript
1          $('input').change(function() {
2            if ($(this).val() === '') {
3              $("#subresult1").text('')
4            } else {
5              var sub = sample_list.find((v) => v.list === $(this).val());
6              $("#subresult1").text(sub.value)
7            }
8          });