Як отримати JSON з URL у JavaScript?

Ця URL-адреса повертає JSON:

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

Я спробував це, і це не вийшло:

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

console.log(count) // should be 1

Як я можу отримати об’єкт JavaScript з відповіді JSON цієї URL-адреси?

Ви можете використовувати .getJSON()функцію 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
});

Якщо ви не хочете використовувати jQuery, перегляньте цю відповідь для чистого рішення JS: https://stackoverflow.com/a/2499647/1361042

Якщо ви хочете зробити це у звичайному 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це об'єкт, тому ви можете отримати доступ до його атрибутів, не маючи їх аналізувати.

За допомогою Chrome, Firefox, Safari, Edge та Webview ви зможете використовувати API для завантаження, що робить це набагато простіше та набагато коротше.

Якщо вам потрібна підтримка IE або старіших браузерів, ви також можете скористатися програмою для отримання поліфону .

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 отримання

Навіть незважаючи на те, що Node.js не має вбудованого методу, ви можете використовувати node-fetch, який дозволяє точно виконати цю реалізацію.

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

ви можете впоратися з помилками шляхом спроб лову

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 - це 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запит є типовим.

Визначте функцію, як:

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])

});

цього ранку я також мав ті самі сумніви, і тепер я очистився, я щойно використав JSON з "відкритою картою погоди" ( https://openweathermap.org/ ) api та отримав дані з URL-адреси у файлі index.html, код виглядає приблизно так: -

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

Я мав відкрито давати ключ api, тому що я мав безкоштовну підписку, просто маю безкоштовні підписки на початку. ви можете знайти кілька хороших безкоштовних програм і ключів на "rapidapi.com"

Ви можете отримати доступ до даних JSON, використовуючи fetch () в JavaScript

Оновіть параметр URL для fetch () зі своїм URL-адресою.

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

Сподіваюся, що це допомагає, мені це прекрасно працювало

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


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