web-dev-qa-db-fra.com

Comment obtenir du JSON à partir d'une URL en JavaScript?

Cette URL renvoie JSON:

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

J'ai essayé ça et ça n'a pas marché:

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

console.log(count) // should be 1

Comment obtenir un objet JavaScript à partir de la réponse JSON de cette URL?

javascriptjson
134
Yiğit Doğuş Özçelik

Vous pouvez utiliser jQuery .getJSON() function:

$.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) {
    //data is the JSON string
});

Si vous ne souhaitez pas utiliser jQuery, vous devez rechercher cette réponse pour la solution JS pure: https://stackoverflow.com/a/2499647/1361042

141
Dan Barzilay

Si vous voulez le faire en javascript simple, vous pouvez définir une fonction comme celle-ci:

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();
};

Et utilisez-le comme ceci:

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

Notez que data est un objet, vous pouvez donc accéder à ses attributs sans avoir à l'analyser.

105
Robin Hartmann

Avec Chrome, Firefox, Safari, Edge et Webview, vous pouvez utiliser l’API de récupération de manière native, ce qui simplifie beaucoup la tâche et la rend beaucoup plus concise.

Si vous avez besoin de support pour IE ou les navigateurs plus anciens, vous pouvez également utiliser le fetch polyfill . 

let url = 'https://example.com';

fetch(url)
.then(res => res.json())
.then((out) => {
  console.log('Checkout this JSON! ', out);
})
.catch(err => { throw err });

MDN: Fetch API

Même si Node.js n'a pas cette méthode intégrée, vous pouvez utiliser node-fetch qui permet la même implémentation.

57
DBrown

Axios est un client HTTP basé sur une promesse pour le navigateur et node.js .

Il offre des transformations automatiques pour les données JSON et il est recommandation officielle de l'équipe de Vue.js lors de la migration depuis la version 1.0, qui incluait un client REST par défaut.

Exécution d'une requête GET

// Make a request for a user with a given ID
axios.get('http://query.yahooapis.com/v1/publ...')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Ou même simplement axios(url) suffit car une demande GET est la valeur par défaut.

4
Emile Bergeron

Une fonction:

fetchRestaurants(callback) {
    fetch(`http://www.restaurants.com`)
       .then(response => response.json())
       .then(json => callback(null, json.restaurants))
       .catch(error => callback(error, null))
}

usage:

fetchRestaurants((error, restaurants) => {
    if (error) 
        console.log(error)
    else 
        console.log(restaurants[0])

});
1
Dan Alboteanu

essayer

obj = await (await fetch(url)).json();

async function get() {
    let url = 'https://my-json-server.typicode.com/typicode/demo/db'
    let obj = await (await fetch(url)).json();
    console.log(obj);
}
<button onclick="get()">Load data</button>
1
Kamil Kiełczewski

Vous pouvez accéder aux données JSON en utilisant fetch () en JavaScript

Mettez à jour le paramètre url de fetch () avec votre url.

fetch(url)
    .then(function(response){
        return response.json();
    })
    .then(function(data){
        console.log(data);
    })

J'espère que ça aide, cela a fonctionné parfaitement pour moi.

1
Shivansh Srivastava
//Resolved
const fetchPromise1 = fetch(url);
    fetchPromise1.then(response => {
      console.log(response);
    });


//Pending
const fetchPromise = fetch(url);
console.log(fetchPromise);
0
ashish bandiwar
async function fetchDataAsync() {
    const response = await fetch('https://api.github.com/users/zq-jhon');
    console.log(await response.json())

}


fetchDataAsync();
0
zq-jhon