JavaScript'te URL'den JSON nasıl alınır?

Bu URL JSON döndürür:

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

Bunu denedim ve işe yaramadı:

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

console.log(count) // should be 1

Bu URL'nin JSON yanıtından nasıl bir JavaScript nesnesi alabilirim?

JQuery .getJSON()işlevini kullanabilirsiniz :

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

JQuery kullanmak istemiyorsanız, saf JS çözümü için şu cevaba bakmalısınız: https://stackoverflow.com/a/2499647/1361042

Düz javascript ile yapmak istiyorsanız, aşağıdaki gibi bir işlev tanımlayabilirsiniz:

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

Ve şu şekilde kullanın:

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

Bunun databir nesne olduğunu unutmayın , böylece özniteliklerine ayrıştırmak zorunda kalmadan erişebilirsiniz.

Chrome, Firefox, Safari, Edge ve Webview ile getirme API'sını yerel olarak kullanabilirsiniz, bu da bunu çok daha kolay ve çok daha düzenli hale getirir.

IE veya daha eski tarayıcılar için desteğe ihtiyacınız varsa, çoklu doldurmayı da kullanabilirsiniz .

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

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

MDN: Getirme API'sı

Node.js'de bu yöntem yerleşik olmasa da, aynı uygulamaya izin veren düğüm getirme özelliğini kullanabilirsiniz .

ES8 (2017) deneyin

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

try-catch ile hataları halledebilirsiniz

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 , tarayıcı ve node.js için söz tabanlı bir HTTP istemcisidir .

JSON verileri için otomatik dönüşümler sunar ve varsayılan olarak bir REST istemcisi içeren 1.0 sürümünden geçiş yaparken Vue.js ekibinin resmi önerisidir .

Bir GETistekte bulunma

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

Ya da axios(url)bir GETistek varsayılan olduğu için bile yeterlidir .

Şunun gibi bir işlev tanımlayın:

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

Sonra şu şekilde kullanın:

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

});

Bu sabah, aynı şüphe vardı ve şimdi temizlendi ben sadece 'açık hava haritası' ( https://openweathermap.org/ ) api ile JSON kullanmış ve index.html dosyasındaki URL'den veri aldım, kod şöyle görünür: -

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

ücretsiz abonelik vardı, sadece başlangıçta ücretsiz abonelikler var çünkü ben açık bir şekilde api anahtarı vermek vardı. bazı iyi ücretsiz api ve anahtarları "rapidapi.com" da bulabilirsiniz

JSON verilerine JavaScript'te fetch () yöntemini kullanarak erişebilirsiniz

Fetch () 'nin url parametresini url'nizle güncelleyin.

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

Umarım yardımcı olur, benim için mükemmel çalıştı.

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


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