javascript - JavaScriptでURLからJSONを取得するには?

Question

この URLは JSON を返します。

{
  query: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  }
}

私はこれを試しましたが、うまくいきませんでした：

responseObj = readJsonFromUrl('http://query.yahooapis.com/v1/publ...');
var count = responseObj.query.count;

console.log(count) // should be 1

この URL の JSON 応答から JavaScript オブジェクトを取得するにはどうすればよいですか?

Answer 1

jQuery.getJSON()関数を使用できます：

$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback', function(data) {
    // JSON result in `data` variable
});

jQuery を使用したくない場合は、純粋な JS ソリューションについてこの回答を参照してください。

Answer 2

プレーンな JavaScript で実行したい場合は、次のような関数を定義できます。

var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status === 200) {
        callback(null, xhr.response);
      } else {
        callback(status, xhr.response);
      }
    };
    xhr.send();
};

そして、次のように使用します。

getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback',
function(err, data) {
  if (err !== null) {
    alert('Something went wrong: ' + err);
  } else {
    alert('Your query count: ' + data.query.count);
  }
});

dataはオブジェクトであるため、解析せずにその属性にアクセスできることに注意してください。

Answer 3

このページの@DanAlboteanuの回答と、そのjavascriptのエラー修正として、私の提案するコードは次のとおりです。

fetchRestaurants((error, data) => {
    if (error)
        console.log(error); 
    else
        console.log(data)

});

fetchRestaurants メソッドは次のとおりです (json url を {json データの url} に置き換えてください):

function fetchRestaurants(callback) {
    fetch("{your url of json data}")
       .then(response => response.json())
       .then(json => callback(null, json))
       .catch(error => callback(error, null))
}