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

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

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

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

JavaScript

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

Q&A

解決済

3回答

2698閲覧

JavaScriptでJSONデータの取得

_3104

総合スコア16

JSON

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

JavaScript

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

0グッド

0クリップ

投稿2017/08/30 06:05

編集2017/08/30 06:15

お世話になっております。
新人プログラマーです。
現在JavaScriptでUI開発を行っております。

###前提・実現したいこと
JavaScriptでJSONデータ(外部ファイル)を取得し
画面上に文字列を出力したいです。

###試したこと
下のように書いてみましたが
文字列が表示されませんでした。

##エラー
XMLHttpRequest cannot load

###該当のソースコード

html

1<body onload="getJson()"> 23<td id="output_name"><font size="3"></font></td> 45<script> 6 function getJson(){ 7 var xmlhttp = new XMLHttpRequest(); 8 9 xmlhttp.onreadystatechange = function(){ 10 if (xmlhttp.readyState == 4) { 11 if (xmlhttp.status == 200) { 12 var data = JSON.parse(xmlhttp.responseText); 13 var elem = document.getElementById("output_name"); 14 elem.innerText = data.name; 15 } 16 } 17 } 18 xmlhttp.open("GET", "data.json"); 19 xmlhttp.send(null); 20 } 21</script> 22

json

1{ 2 "name":"参考資料", 3 "updated":, 4 "type":"folder", 5}, 6 7{ 8 "name":"2017_05_15.CrewA.pdf", 9 "updated":, 10 "type":"file", 11}, 12 13{ 14 "name":"2017_05_15.CrewB.pdf", 15 "updated":, 16 "type":"file", 17}, 18 19{ 20 "name":"2017_05_15.CrewC.pdf", 21 "updated":, 22 "type":"file", 23}, 24 25{ 26 "name":"2017_05_15.CrewD.pdf", 27 "updated":, 28 "type":"file", 29}, 30 31{ 32 "name":"2017_05_15.CrewE.pdf", 33 "updated":, 34 "type":"file", 35}

###補足情報(言語/FW/ツール等のバージョンなど)
追加したほうが良い情報がありましたら、
教えていただけますと幸いです。

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

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

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

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

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

maisumakun

2017/08/30 06:10

コンソール(多くのブラウザでF12を押すと出せます)には、何かエラーは出ていますでしょうか。
m.ts10806

2017/08/30 06:10

「うまく表示できない」というのは具体的にどのような現象が起きたか、記載願います。
_3104

2017/08/30 06:22

指摘ありがとうございます。追記しました。
guest

回答3

0

ベストアンサー

XMLHttpRequest cannot load

そのエラーメッセージには続きがあるのではないでしょうか。
例えば、Google Chrome で file:///C:/foo/index.html から本JavaScriptコードを呼び出すと下記エラーメッセージが返ってきます。

JavaScript

1XMLHttpRequest cannot load file:///C:/foo/data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

原則として、file:/// スキームから XMLHttpRequest を呼び出すことは出来ません。
fileスキームではHTTP通信リクエストを発行できないからです。
ローカルテストする際には Apache 等のHTTPサーバを立て、http://127.0.0.1/ でテストする必要があります。

Re: _3104 さん

投稿2017/08/30 06:37

think49

総合スコア18156

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

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

_3104

2017/08/30 07:38

回答ありがとうございます。 ご指摘のとおりでした。 サーバー上で情報取得、文字列出力の確認が できました!
think49

2017/08/30 07:44 編集

エラーメッセージには "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." と書かれていましたので、最後まで読んでみると原因が理解できたと思います。 頑張ってください。
guest

0

jsonデータをきちんとした形式で書いて下さい

JSON

1[ 2{ 3 "name":"参考資料", 4 "updated":"", 5 "type":"folder" 6}, 7{ 8 "name":"2017_05_15.CrewA.pdf", 9 "updated":"", 10 "type":"file" 11}, 12{ 13 "name":"2017_05_15.CrewB.pdf", 14 "updated":"", 15 "type":"file" 16}, 17{ 18 "name":"2017_05_15.CrewC.pdf", 19 "updated":"", 20 "type":"file" 21}, 22{ 23 "name":"2017_05_15.CrewD.pdf", 24 "updated":"", 25 "type":"file" 26}, 27{ 28 "name":"2017_05_15.CrewE.pdf", 29 "updated":"", 30 "type":"file" 31} 32]

その上で

javascript

1var data = JSON.parse(xmlhttp.responseText); 2console.log(data[0].name);

投稿2017/08/30 06:17

yambejp

総合スコア114572

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

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

_3104

2017/08/30 06:28

回答ありがとうございます。 修正して確認します。
guest

0

onreadystatechange()よりopen()を先に書くべきです。
順番は対象を開く→対象を取得する ですよね。

念のため、json.parseする前にresponseTextをconsole.logなりalertなりで想定どおりの情報が取得できているかご確認ください。
また、ブラウザの開発ツールではエラーが確認できます。文法的に正しくない箇所やレスポンス情報なども確認できるのでご活用ください。

投稿2017/08/30 06:10

編集2017/08/30 06:13
m.ts10806

総合スコア80765

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

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

_3104

2017/08/30 06:26

回答ありがとうございます。 jsonデータが取得できていないようでした。
m.ts10806

2017/08/30 06:40

think49さんの回答を参考にしてください。 上記の記事にあるとおりローカルPC上のファイルを直接参照することは出来ないようです。 サーバー上で実行する必要があります。 私の方ではApache配下で取得確認できました。 あとごめんなさい。記述の順番関係なさそうです。失礼しました。
_3104

2017/08/30 07:35

アドバイスありがとうございます。 サーバー上で実行し、情報取得と出力することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問