Comment obtenir 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é ceci, et cela n'a pas fonctionné:

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

console.log(count) // should be 1

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

Vous pouvez utiliser la .getJSON()fonction jQuery :

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

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

Si vous voulez le faire en javascript brut, 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 qu'il datas'agit d'un objet, vous pouvez donc accéder à ses attributs sans avoir à l'analyser.

Avec Chrome, Firefox, Safari, Edge et Webview, vous pouvez utiliser nativement l'API fetch, ce qui rend cela beaucoup plus facile et beaucoup plus laconique.

Si vous avez besoin de la prise en charge d'IE ou de navigateurs plus anciens, vous pouvez également utiliser le polyfill fetch .

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 exactement la même implémentation.

ES8 (2017) essayer

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

async function load() {
    let url = 'https://my-json-server.typicode.com/typicode/demo/db';
    let obj = await (await fetch(url)).json();
    console.log(obj);
}

load();

vous pouvez gérer les erreurs par try-catch

async function load() {
    let url = 'http://query.yahooapis.com/v1/publ...';
    let obj = null;
    
    try {
        obj = await (await fetch(url)).json();
    } catch(e) {
        console.log('error');
    }
    
    console.log(obj);
}

load();

Axios est un client HTTP à base de promesse pour le navigateur et Node.js .

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

Effectuer une GETdemande

// 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 axios(url)suffit car une GETdemande est la valeur par défaut.

Définissez une fonction comme:

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

Ensuite, utilisez-le comme ceci:

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

});

ce matin, j'ai également eu le même doute et maintenant c'est effacé, je venais d'utiliser JSON avec l' api 'open-weather-map' ( https://openweathermap.org/ ) et j'ai obtenu des données de l'URL dans le fichier index.html, le code ressemble à ceci: -

 //got location
 var x = document.getElementById("demo");
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(weatherdata);
      } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    //fetch openweather map url with api key
    function weatherdata(position) {
//put corrdinates to get weather data of that location
      fetch('https://api.openweathermap.org/data/2.5/weather?lat='+position.coords.latitude+'&lon='+position.coords.longitude+'&appid=b2c336bb5abf01acc0bbb8947211fbc6')
      .then(response => response.json())
      .then(data => {
      console.log(data);
      document.getElementById("demo").innerHTML = 
      '<br>wind speed:-'+data.wind.speed + 
      '<br>humidity :-'+data.main.humidity + 
      '<br>temprature :-'+data.main.temp  
      });
    }

  <div id="demo"></div>

J'avais donné la clé d'API ouvertement parce que j'avais un abonnement gratuit, il suffit d'avoir un abonnement gratuit au début. vous pouvez trouver de bonnes API et clés gratuites sur "rapidapi.com"

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

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

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

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

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


//Pending
const fetchPromise = fetch(url);
console.log(fetchPromise);