Как получить JSON из URL в JavaScript?

Ответ 1

Вы можете использовать функцию jQuery .getJSON():

$.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) {
    //data is the JSON string
});

Если вы не хотите использовать jQuery, вы должны посмотреть на этот ответ для чистого решения JS: fooobar.com/questions/75498/...

Ответ 2

Если вы хотите сделать это в простом javascript, вы можете определить такую ​​функцию:

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

И используйте его следующим образом:

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

Обратите внимание, что data - это объект, поэтому вы можете получить доступ к его атрибутам без необходимости его синтаксического анализа.

Ответ 3

С помощью Chrome, Firefox, Safari, Edge и Webview вы можете использовать API извлечения, что значительно упрощает эту задачу и делает ее более лаконичной.

Если вам нужна поддержка IE или более старых браузеров, вы также можете использовать выборку 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: Fetch API

Хотя Node.js не имеет этого встроенного метода, вы можете использовать node-fetch, который допускает точно такую же реализацию.

Ответ 4

Axios - это HTTP-клиент на основе обещаний для браузера и node.js.

Он предлагает автоматическое преобразование для данных JSON и является официальной рекомендацией команды Vue.js при переходе с версии 1.0, которая по умолчанию включает клиент REST.

Выполнение запроса GET

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

Или даже просто axios(url) достаточно, поскольку запрос GET используется по умолчанию.

Ответ 5

ES8 (2017) попробовать

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

Ответ 6

Вы можете определить функцию, подобную этой:

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

Тогда используйте это так:

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

});

Ответ 7

Вы можете получить доступ к данным JSON с помощью fetch() в JavaScript

Обновите параметр url функции fetch() в соответствии с вашим URL.

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

Надеюсь, это помогает, это отлично сработало для меня.

Ответ 8

async function fetchDataAsync() {
    const response = await fetch('https://api.github.com/users/zq-jhon');
    console.log(await response.json())

}


fetchDataAsync();

Ответ 9

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


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