¿Cómo obtener JSON de URL en JavaScript?

166

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?

Yiğit Doğuş Özçelik
fuente
1
Lo que tiene es una URL que devuelve una respuesta que contiene una cadena JSON. ¿Estás preguntando cómo solicitar algo desde una URL? Porque eso dependería mucho del idioma o la herramienta que esté utilizando. Sé más específico.
jrajav
1
Esta pregunta es confusa. ¿No obtienes el objeto JSON usando la URL que mencionaste? ¿Qué quieres decir con obtener el objeto JSON de una URL? por favor aclarar
Steven

Respuestas:

165

Puede usar la .getJSON()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, debe consultar esta respuesta para obtener una solución JS pura: https://stackoverflow.com/a/2499647/1361042

Dan Barzilay
fuente
14
Punto menor, pero podría ser más claro si dijera 'El JSON está en la datavariable'
Nathan Hornby
2
El ejemplo de JavaScript puro al que apunta es para JSONP, que no funcionará con la pregunta.
SArcher
137

Si desea hacerlo en javascript simple, puede 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
fuente
¿Por qué usar .onload = function() {cuando puedes usar? .onreadystatechange = function() { if (xhr.readState === 4) {Quiero decir, es más corto, pero estás sacrificando una gran cantidad de soporte para salvar un par de caracteres. Esto no es código golf
Downgoat
44
No solo es más corto, sino que también parece ser un poco más confiable según esta publicación . Y caniuse.com dice que es compatible con todo, excepto IE8, por lo que mientras no necesite admitir IE8, no veo por qué no usaría onload.
Robin Hartmann
@MikeySkullivan Quería saber una cosa, ¿por qué es que recibo responseText y responseXML como indefinidos aunque el estado de respuesta = 200?
hrushi
1
@hrushi Si no están definidos, está accediendo a ellos de manera incorrecta o en un contexto incorrecto. Recuerde, debe usar xhr.responseText y xhr.responseXML y solo están disponibles dentro del bloque de definición de función getJSON, no fuera de él.
Robin Hartmann
2
@ MitchellD ¿Está utilizando Node.js? Entonces echa un vistazo por aquí . Pero la próxima vez que intente buscar el error en Google primero, el enlace que publiqué es el primer resultado que aparece cuando escribo el error en Google.
Robin Hartmann
81

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

Si necesita soporte para IE o navegadores anteriores, también puede usar el polyfill de búsqueda .

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

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

DBrown
fuente
66
Uf ... esto ni siquiera se compila en IE11. ¿Por qué IE es tan basura?
dano
44
Siempre puede usar el polyfill de github / fetch para superar este problema.
DBrown
@dano son las funciones de flecha. Usar funciones regulares o Babel para transpilar
Phil
1
@ Phil gracias por señalar ES6. El mayor problema con IE11 es que fetch no es una API compatible: developer.mozilla.org/en-US/docs/Web/API/Fetch_API También se debe saber que el polyfill de fetch necesario para IE11 es puramente ES5 (debido a la falta de soporte), por lo que no hay necesidad real de transpilación ES6 a menos que lo necesite absolutamente de otra manera. Si la única razón para agregarlo es para admitir el idioma de búsqueda (si el polyfill incluso lo admite), usar babel-polyfill es una mejor opción. ¡La mejor de las suertes!
DBrown
8

ES8 (2017) prueba

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

puedes manejar errores por try-catch

Kamil Kiełczewski
fuente
7

Axios es un cliente HTTP basado en promesas para el navegador y node.js .

Ofrece transformaciones automáticas para datos JSON y es la recomendación oficial del equipo de Vue.js al migrar desde la versión 1.0 que incluía un cliente REST por defecto.

Realizar una GETsolicitud

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

O incluso axios(url)es suficiente ya que una GETsolicitud es la predeterminada.

Emile Bergeron
fuente
3

Defina una función como:

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

Entonces úsalo así:

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

});
Dan Alboteanu
fuente
1
Dado que hay muchas respuestas existentes, mencione qué pasa con esta respuesta que hace que valga la pena agregar a la discusión. El uso de fetch se ha mencionado en varias respuestas existentes.
ToolmakerSteve
2
Esta es la única respuesta relevante en 2020. Es simplemente una búsqueda que necesita una devolución de llamada para cuando se completa un evento asincrónico. Fácil y elegante
lesolorzanov
¿Por qué no se fetchespera en este caso? Estoy confundido, sigo viendo ejemplos donde se espera y se llama claramente
Pynchia
0

Esta mañana, también tuve la misma duda y ahora está despejado, acababa de usar JSON con 'open-weather-map' ( https://openweathermap.org/ ) api y obtuve datos de la URL en el archivo index.html, el código se ve así:

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

Había dado una clave de API abiertamente porque tenía una suscripción gratuita, solo tenía una suscripción gratuita al principio. puedes encontrar algunas buenas claves y API gratis en "rapidapi.com"

usuario12449933
fuente
-1

Puede acceder a los datos JSON utilizando fetch () en JavaScript

Actualice el parámetro url de fetch () con su url.

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

Espero que ayude, funcionó perfectamente para mí.

Shivansh Srivastava
fuente
2
Esto parece ser un duplicado de la respuesta de DBrown . Por favor no agregue respuestas duplicadas. Si hay algo único en esta respuesta, mencione la respuesta de DBrown y explique qué tiene de diferente la suya.
ToolmakerSteve
-1
//Resolved
const fetchPromise1 = fetch(url);
    fetchPromise1.then(response => {
      console.log(response);
    });


//Pending
const fetchPromise = fetch(url);
console.log(fetchPromise);
Ashish Bandiwar
fuente
1
Esta es la única respuesta de código! agregue alguna explicación a la publicación
Ram Ghadiyaram
2
Dado que hay muchas respuestas existentes, mencione qué sobre esta respuesta hace que valga la pena agregarla a la discusión. El uso de fetchha sido mencionado en varias respuestas existentes.
ToolmakerSteve
-1

async function fetchDataAsync() {
    const response = await fetch('paste URL');
    console.log(await response.json())

}


fetchDataAsync();

zq-jhon
fuente
Por favor describa algo sobre su respuesta.
Angel F Syrus
1
Dado que hay muchas respuestas existentes, mencione qué sobre esta respuesta hace que valga la pena agregarla a la discusión. El uso de fetchha sido mencionado en varias respuestas existentes. El uso de await/asyncfetch se describió en la respuesta de Kamil .
ToolmakerSteve