jsonデータを読み込んで検索可能なオプションメニューをつくりたい

外部jsonファイルを読み込んで、オプションメニューに表示されたいのですが、
オプションメニューに表示されません。

【jsontest.html】

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  
15  <input type="text" id="wrap" autocomplete="true">
16    <script type="text/javascript">
17      $(function(){
18        $.getJSON("data1.json", function(sample_list){
19          for(var i in sample_list){
20            var h = '<datalist>'
21                  + '<option>'
22                  + sample_list[i].list
23                  + '</option>'
24                  +'</datalist>';
25            $("input#wrap").append(h);
26          }
27        });
28      });
29    </script>
30  </input>
31</body>
32</html>

【data1.json】

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

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

回答1件

ベストアンサー

javascript
1  $.getJSON("data1.json", function(sample_list){
2    var d=$('<datalist id="list">').append(sample_list.map(x=>$(`<option value="${x.value}>">${x.list}</option>`)));
3    $("input#wrap").append(d);
4  });