json埋め込みのコードに書き換えたいがわからない

実際環境でテストしたところ、
外部jsonが機能せず、404エラーになるためjsonデータをhtmlに埋め込みしたいのですが、
$.getJSON部分のコードの書き換えがうまくできません。
json埋め込みのコードに書き換えて、以下のコードで動作するように書き換えたいです。

※外部jsonデータを変数に入れたり、
書き換えできるところはしています。

[追記]
・json埋め込み書き換えで表示はされるようになったのですが、
実際のデータよりも、プルダウンメニューで多く表示されてしまいます。

・

html
1<DOCTYPE html>
2    <html>
3     <head>
4      <meta charset="UTF-8">
5      <meta name="robots" content="noindex,nofollow">
6      <meta http-equiv="content-language" content="ja">
7      <meta http-equiv="Pragma" content="no-store">
8      <meta http-equiv="Cache-Control" content="no-store">
9      <meta http-equiv="Expires" content="0">
10   
11   
12      <!-- ビューポートの設定 -->
13      <meta name="viewport" content="width=device-width, initial-scale=1.0">
14   
15   
16      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
17   
18      <title>デモ</title>
19   
20      <style>
21        html{
22         font-size:20px;
23        }
24        body{
25         margin:30px;
26        }
27        main{
28         background-color:#f8f8f8;
29         padding:20px;
30        }
31        h2{
32         font-size:22px;
33        }
34        
35       
36        select,input,textarea{
37         font-family : inherit;
38         font-size:20px;
39   
40   
41         padding:3px;
42         border:1px solid black;
43         vertical-align:middle;
44        }
45
46             </style>
47        </head>
48   <body>
49   
50   
51   
52   <main>
53   <h1 style="color:black;">ＤＥＭＯ</h1>
54   
55   
56   <!-- 2つめの計算の箇所-->
57   <h2>データ名2</h2>
58   <select id="subtotal2" style="font-size:18px;width:200px;"></select>
59   <p id="subresult2">1</p>
60   
61   <!-- 2つめの計算の箇所ここまで-->
62   
63   
64   
65   
66   
67   
68   
69   <HR style="margin: 2em 0 ;">
70   
71   
72   </main>
73   
74   
75   
76   
77   
78   
79   <script>
80   
81       jQuery(function($){
82   
83           var data2Json= [
84  {
85    "list": "データを選択してください",
86    "value": "1",
87    "type":"条AA"
88  },
89  {
90    "list": "aA",
91    "value": "1.2",
92    "type":"条AA"
93  },
94  {
95    "list": "いB",
96    "value": "1.5",
97    "type":"条BB"
98  },
99  {
100    "list": "うC",
101    "value": "1.8",
102    "type":"条CC"
103  }
104];
105   
106
107
108 
109   
110 
111   
112                    
113
114                    $("#subtotal2").append(data2Json.map(
115                    x => $(`<option value="${x.value}">${x.list}</option>`)));
116			
117$('#subtotal2').change(function() {
118$('#subresult2').text($(this).val());
119window.Calc2 = $(this).val();
120//gassanFnc();
121});
122         
123   
124   
125   
126              
127   
128               });
129           </script>
130       </body>
131   </html>

m.ts10806

2020/09/28 01:15

１ファイルにすべて書かれてるんでしょうか。

Miii

2020/09/29 06:26

お返事くださりありがとうございます。サンプルでは1コードですが、いくつか分けていました。無事に内部埋め込みできました！ありがとうございます！

m.ts10806

2020/09/29 06:35

ファイル毎に分けてください。あとから見た人も読みづらいです

Miii

2020/09/29 08:10

ソースファイルを確認したところ、間違いで、二度htmlの記述をしてありましたので、修正いたしました。 jsonファイルとは分けておりましたが、htmlは1ファイルでございます。

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

回答1件

ベストアンサー

javasuript
1$("#subtotal2").append(data2Json.map(
2x => $(`<option value="${x.value}">${x.list}</option>`)));

javaScriptのMapとJSONで事故りそうになる話。

投稿2020/09/28 02:30

kuma_kuma_

総合スコア2506

Miii

2020/09/29 06:30

ご回答くださりありがとうございます。こちらの質問のお返事遅くなりましたが、無事に内部埋め込みできました！ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

json埋め込みのコードに書き換えたいがわからない

関連した質問