JavaScript で JSON 応答からデータを抽出するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript で JSON 応答からデータを抽出するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-10-28 03:32:02

オリジナル

519 人が閲覧しました

How to extract data from a JSON response in JavaScript?

JavaScript で URL からの JSON 応答を解析する方法

多くの Web サービスは応答を JSON 形式で提供するため、JavaScript アプリケーションと簡単に統合できます。ただし、JSON 応答からのデータへのアクセスは初心者にとって難しい場合があります。

次の URL の例を考えてみましょう:

http://query.yahooapis.com/v1/publ...

ログイン後にコピー

この URL は次のような構造の JSON 応答を返します:

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

ログイン後にコピー

この JSON 応答を解析して JavaScript オブジェクトを作成するには、いくつかのオプションが利用できます。

jQuery の .getJSON() 関数を使用する

jQuery には、フェッチ用の .getJSON() という便利な関数が用意されています。 URL からの JSON データ。 URL とコールバック関数を指定することで、応答を処理できます。

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

ログイン後にコピー

純粋な JavaScript の使用

jQuery の代替方法は、純粋な JavaScript を使用して JSON 応答を処理することです。 XMLHttpRequest オブジェクトを使用して、URL:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&amp;format=json&amp;diagnostics=true&amp;env=store://datatables.org/alltableswithkeys');
xhr.send();

xhr.onload = function() {
    if (xhr.status == 200) {
        var responseObj = JSON.parse(xhr.responseText);
        // JSON result in `responseObj` variable
    }
};

ログイン後にコピー

への GET リクエストを行うことができます。

以上がJavaScript で JSON 応答からデータを抽出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。