Maison  >  Article  >  interface Web  >  Comment extraire les données d'une réponse JSON en JavaScript ?

Comment extraire les données d'une réponse JSON en JavaScript ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-28 03:32:02422parcourir

How to extract data from a JSON response in JavaScript?

Comment analyser la réponse JSON à partir d'une URL en JavaScript

De nombreux services Web fournissent leurs réponses au format JSON, ce qui les rend facilement intégrés aux applications JavaScript. Cependant, accéder aux données à partir d'une réponse JSON peut être difficile pour les débutants.

Considérez cet exemple d'URL :

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

Cette URL renvoie une réponse JSON structurée comme suit :

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

Pour analyser cette réponse JSON et créer un objet JavaScript, plusieurs options sont disponibles.

Utilisation de la fonction .getJSON() de jQuery

jQuery fournit une fonction pratique appelée .getJSON() pour la récupération Données JSON à partir d'une URL. En spécifiant l'URL et une fonction de rappel, vous pouvez gérer la réponse :

$.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
});

Utiliser du JavaScript pur

Une alternative à jQuery consiste à utiliser du JavaScript pur pour gérer la réponse JSON. L'objet XMLHttpRequest peut être utilisé pour effectuer une requête GET à l'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&format=json&diagnostics=true&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
    }
};

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn