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

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

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

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

JavaScript

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

Q&A

解決済

2回答

560閲覧

XMLHttpRequestオブジェクトを用いてのJSONファイルの読み込み方

a-212

総合スコア17

JSON

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

JavaScript

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

0グッド

0クリップ

投稿2020/02/19 09:48

JsonTest.js

Javascript

1var button = document.querySelector('#load'); 2 3 4button.addEventListener('click',function(event){ 5 var xmlHttpRequest = new XMLHttpRequest(); 6 xmlHttpRequest.onreadystatechange = function(){ 7 if(this.readyState == 4 && this.status ==0){ 8 console.log(this.readyState,this.response); 9 } 10 }; 11 xmlHttpRequest.responseType = 'json'; 12 xmlHttpRequest.open('GET','../products.json'); 13 xmlHttpRequest.send(); 14});

products.json

json

1[ 2 {"id":1,"name":"iphoneケース<br><span>iphone6</span>ケース","price":980, "image":"images/01.jpg","del":0,"isSale":true}, 3 {"id":2,"name":"iphoneケース<br><span>iphone7</span>ケース","price":1580,"image":'"images/02.jpg","del":0,"isSale":true}, 4 {"id":3,"name":"iphoneケース<br><span>iphone8</span>ケース","price":1560,"image":'"images/03.jpg","del":240,"isSale":true}, 5 {"id":4,"name":"iphoneケース<br><span>iphone9</span>ケース","price":1280,"image":'"images/04.jpg","del":0,"isSale":true}, 6 {"id":5,"name":"iphoneケース<br><span>iphoneX</span>ケース","price":1560,"image":'"images/05.jpg","del":0,"isSale":false}, 7 {"id":6,"name":"iphoneケース<br><span>ihoneXI</span>ケース","price":1560,"image":'"images/06.jpg","del":0,"isSale":false} 8]

上記のようなコードでhttp-serverを使いローカルホストからデータ取得を行おうとしてるのですがconsoleでは**cosole.log(4,null)**が返ってきます。CORSエラーはありません。何かアドバイスいただければありがたいです

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

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

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

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

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

guest

回答2

0

ベストアンサー

まず、JSONが不正確です。不正なシングルクォートが入っています。

投稿2020/02/19 10:23

yambejp

総合スコア114572

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

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

yambejp

2020/02/19 10:24

悪いこと言わないのでfetchに切り替えましょう fetch('../products.json').then(res=>res.json()).then(console.log);
a-212

2020/02/19 10:38

まだ初学者なものでサンプルをみながら書いてたのでfetchは知りませんでした。 ご回答の通りシングルクォートを見落としていました、ありがとうございました!
yambejp

2020/02/19 10:42

XMLHttpRequest自体古い技術なので、レガシーな環境でやる場合は 避けて通れませんが、なにぶん使い勝手が悪いです。 jQueryの$.ajaxを使えば使い勝手はあがるのでそれでもいいですが いまはjs自体の非同期処理であるfetchの方が圧倒的に使い勝手はよいです ※fetchはpromiseをチェーンする機能をもっているため
guest

0

this.status ==0という条件が不適当ではないかと思われます。HTTPのステータスコードなので、成功したときには200を筆頭に200番代のコードが返されます。

投稿2020/02/19 10:13

maisumakun

総合スコア145121

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問