Wie bekomme ich JSON von der URL in JavaScript?

Diese URL gibt JSON zurück:

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

Ich habe es versucht und es hat nicht funktioniert:

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

console.log(count) // should be 1

Wie kann ich ein JavaScript-Objekt aus der JSON-Antwort dieser URL abrufen?

Sie können die jQuery- .getJSON()Funktion verwenden:

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

Wenn Sie jQuery nicht verwenden möchten, sollten Sie sich diese Antwort für eine reine JS-Lösung ansehen: https://stackoverflow.com/a/2499647/1361042

Wenn Sie dies in einfachem Javascript tun möchten, können Sie eine Funktion wie die folgende definieren:

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

Und benutze es so:

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

Beachten Sie, dass dies dataein Objekt ist, sodass Sie auf seine Attribute zugreifen können, ohne es analysieren zu müssen.

Mit Chrome, Firefox, Safari, Edge und Webview können Sie die Abruf-API nativ verwenden, was dies viel einfacher und knapper macht.

Wenn Sie Unterstützung für IE oder ältere Browser benötigen, können Sie auch die Abruf-Polyfüllung verwenden .

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

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

MDN: API abrufen

Obwohl in Node.js diese Methode nicht integriert ist, können Sie Node-Fetch verwenden , um genau dieselbe Implementierung zu ermöglichen.

ES8 (2017) versuchen

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

Sie können Fehler durch Try-Catch behandeln

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 ist ein Versprechen basiert HTTP - Client für den Browser und node.js .

Es bietet automatische Transformationen für JSON-Daten und ist die offizielle Empfehlung des Vue.js-Teams bei der Migration von der Version 1.0, die standardmäßig einen REST-Client enthält.

Durchführen einer GETAnfrage

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

Oder auch nur axios(url)genug, da eine GETAnfrage die Standardeinstellung ist.

Definieren Sie eine Funktion wie:

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

Dann benutze es so:

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

});

Heute Morgen hatte ich auch den gleichen Zweifel und jetzt ist es klar, dass ich JSON gerade mit der API 'open-weather-map' ( https://openweathermap.org/ ) verwendet und Daten von der URL in der Datei index.html erhalten habe. Der Code sieht folgendermaßen aus:

 //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>

Ich hatte offen API-Schlüssel geben, weil ich ein kostenloses Abonnement hatte, nur ein kostenloses Abonnement am Anfang. Unter "rapidapi.com" finden Sie einige gute kostenlose APIs und Schlüssel.

Sie können mit fetch () in JavaScript auf JSON-Daten zugreifen

Aktualisieren Sie den URL-Parameter von fetch () mit Ihrer URL.

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

Hoffe es hilft, es hat perfekt für mich funktioniert.

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


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