JSONデータをJQueryを使わずにHTMLで表示する方法を教えてください。

json
1{"item":[
2    {"名前":"田中太郎",
3    "身長":170,
4    "体重":60},
5    
6    {"名前":"田中太郎",
7    "身長":165,
8    "体重":58},
9    
10    {"名前":"田中太郎",
11    "身長":175,
12    "体重":62}
13    ]
14}

上記のようなdata.jsonというjsonファイルを

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>Test</title>
6    </head>
7    <body>
8        <h2>Result</h2>
9        <div id="output"></div>     
10    </body>
11</html>

の#outputのdivに表示させるJavaScriptをどなたか教えていただけますか？

現時点で書いたコードはこちらです :

JavaScript
1let elem = document.getElementById("output");
2function getjson(){
3    let xmlhttp = new XMLHttpRequest();
4    xmlhttp.onreadystatechange = function() {
5        if (xmlhttp.readyState == 4) {
6            if (xmlhttp.status == 200) { 
7                elem.innerText = xmlhttp.responseText;
8            } else {
9                alert("status = " + status.status);
10            } 
11        }
12    }
13    xmlhttp.open("GET", "data.json");
14    xmlhttp.send();
15}
16getjson();

XMLHttpRequestを作成してdata.jsonのデータを取得する所までは分かったのですが、ここからがわかりません。

kyoya0819

2020/03/08 05:32

ご自身でどこまで調べられましたか？現状の質問だと、丸投げ・作業依頼と受け取られてしまいます。

m.ts10806

2020/03/08 07:18

jQueryでできてるのでしたら、そのコードもご提示ください

jun68ykt

2020/03/08 11:46

ご質問に挙げられているコードは、 > #outputのdivに表示させるJavaScript には一応なっていると思います。その確認として、以下は、ご質問に挙げられているコードをcodesandboxに転記したものです。 https://codesandbox.io/s/q245824-16q5n 上記のURLに、私の手元のブラウザ（Firefox v.73）からアクセスすると、Result の下にJSONの内容が表示されています。

Kota.Y

2020/03/08 11:51

私のChromeからアクセスしてもJSONの内容は表示されました。しかし、全く同じコードですがVSCodeのHTTP Reviewを使うと表示されません。もしかしてfile://だとXMLRequestが効かないということはありますか？

Kota.Y

2020/03/08 11:53

m.ts10806さん今回JQuery以外でとお願いしたのは単純に私がJQueryを理解できていないからです。なのでJQueryのコードはありません。

jun68ykt

2020/03/08 12:23 編集

@Kota.Yさん > もしかしてfile://だとXMLRequestが効かないということはありますか？あり得ます。 VSCodeを使っていないので詳しくは分かりませんが、 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. というエラーがどこかに出ていないでしょうか？ちなみにお手元に何らかのWebサーバーを起動できるのでしたら、それのドキュメントルート以下のどこかに作成したHTMLとJSONを置いて、http://localhost/･･･　でそのHTMLにアクセスすればJSONが表示されるのを確認できると思われます。

jun68ykt

2020/03/08 12:37

@Kota.Yさんちょっと調べてみたところ、VSCode の拡張機能（Extention）で、 Live Server というのがあり、対象のHTMLを編集中に、これを起動すると、簡易的なWEBサーバーが動いて、それを通じて編集対象のHTMLをプレビューできるようです。このプレビュー時にはJSのXMLHttpRequest経由での data.json の取得もうまくいくのでは思われます。（やってみていないので、思われます、としか言えませんが。）以下、参考記事です。 VSCodeで拡張機能「Live Server」を使う https://qiita.com/kn339264/items/e6f6a69f70a96e61fc11 (@kn339264さん)

Kota.Y

2020/03/08 12:39

Live Serverを使った結果無事表示されました！丁寧なアドバイスありがとうございます

kyoya0819

2020/03/08 12:41

自己解決をなさるかjun68yktさんの回答にベストアンサーをつけてください。

jun68ykt

2020/03/08 12:42 編集

@Kota.Yさんよかったですね????　それでは、ご自身で「自己解決しました」という趣旨の回答を投稿しそれをベストアンサーにするなどして、このご質問を解決済みにされることをお勧め致します。

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

回答1件

自己解決

追記・修正依頼欄で解決しましたので自己解決として書いておきます。

質問欄のJSコード、HTMLコードは正しかったのですが、VSCodeを使っていたのでHTML Previewのプラグインを使った場合ブラウザには表示されますがファイル形式のままなのでXMLHttpRequestが効きませんでした。
**Live Server**というプラグインをVSCodeで使うと簡易サーバーが動き、無事JSONデータが表示されました。
jun68yktさん、ありがとうございました。

投稿2020/03/08 12:49

Kota.Y

総合スコア25