私はhtmlでjsonからデータを取得しようとしています。私は

Question

私は学習XMLHttpRequest私はAjaxを使用したくないです。 JSONデータが読み込まれていません。 何らかの理由で、私は自分のjsonデータの価値を得ていません。 私はここで間違って作っています何私のコード

function foo() { 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.open('GET', "data.json",true); 
    httpRequest.send(); 
    var abc = httpRequest.responseText; 
} 

私のJSONデータ

[ 
    { 
     ID : 0, 
     VALUE : "United State" 
    },{ 
     ID : 1, 
     VALUE : "United Kingdom" 
    },{ 
     ID : 2, 
     VALUE : "Afghanistan" 
    },{ 
     ID : 3, 
     VALUE : "Aland Islands" 
    },{ 
     ID : 4, 
     VALUE : "Albania" 
    } 
] 

。

Answer 1

あなたが実際にデータを取得する方法であるonreadystatechangeイベントハンドラ、不足している：あなたはあなたの関数のデータの外で作業する必要がある場合は、コールバックのパターンを使用することができます

function foo() { 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.open('GET', "data.json",true); 
    httpRequest.onreadystatechange = function() { 
     if(httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) { 
      console.log(httpRequest.responseText); 
     } 
    }; 
    httpRequest.send(); 
} 

を：

function foo(callback) { 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.open('GET', "data.json",true); 
    httpRequest.onreadystatechange = function() { 
     if(httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) { 
      // trigger your callback function 
      callback(httpRequest.responseText); 
     } 
    }; 
    httpRequest.send(); 
} 

foo(function(data) { 
    console.log(data); 
}); 

またはPromises：

function foo(callback) { 
    return new Promise(function(resolve, reject) { 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.open('GET', "data.json",true); 
    httpRequest.onreadystatechange = function() { 
     if(httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) { 
      // trigger your callback function 
      resolve(httpRequest.responseText); 
     } 
    }; 
    httpRequest.send(); 
    }); 
} 

foo().then(function(data) { 
    console.log(data); 
});