¿Cómo obtener JSON de una URL en JavaScript?

Resuelto Yiğit Doğuş Özçelik asked hace 12 años • 12 respuestas

Esta URL devuelve JSON:

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

Intenté esto y no funcionó:

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

console.log(count) // should be 1

¿Cómo puedo obtener un objeto JavaScript de la respuesta JSON de esta URL?

Aceptado

Puedes usar .getJSON()la función 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 no desea utilizar jQuery, debería consultar esta respuesta para obtener una solución JS pura.

Dan Barzilay avatar Sep 17 '2012 13:09 Dan Barzilay

Si quieres hacerlo en javascript simple, puedes definir una función como esta:

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

Y úsalo así:

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

Tenga en cuenta que dataes un objeto, por lo que puede acceder a sus atributos sin tener que analizarlo.

Robin Hartmann avatar Mar 13 '2016 13:03 Robin Hartmann

Con Chrome, Firefox, Safari, Edge y Webview puedes usar de forma nativa la API de recuperación, lo que lo hace mucho más fácil y conciso.

Si necesita soporte para IE o navegadores más antiguos, también puede utilizar la función de búsqueda de 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: Obtener API

Aunque Node.js no tiene este método integrado, puede usar node-fetch , que permite exactamente la misma implementación.

DBrown avatar Apr 03 '2017 02:04 DBrown

ES8 (2017) prueba

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

Mostrar fragmento de código

puedes manejar errores mediante try-catch

Mostrar fragmento de código

Kamil Kiełczewski avatar Apr 21 '2019 16:04 Kamil Kiełczewski