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

Question

JsonTest.js

var button = document.querySelector('#load');


button.addEventListener('click',function(event){
  var xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.onreadystatechange = function(){
    if(this.readyState == 4 && this.status ==0){
      console.log(this.readyState,this.response);
    }
  };
  xmlHttpRequest.responseType = 'json';
  xmlHttpRequest.open('GET','../products.json');
  xmlHttpRequest.send();
});

products.json

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

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

Answer 1

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

Comments

[yambejp]

悪いこと言わないのでfetchに切り替えましょう

fetch('../products.json').then(res=>res.json()).then(console.log);

[a-212]

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

[yambejp]

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

※fetchはpromiseをチェーンする機能をもっているため

Answer 2

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