Как получить данные JSON?

Question

[tarthur]

Есть такой country.io/names.json
Как получить эти данные на чистом JS?

Answer 1

[Никита Гущин]

На чистом JS - у браузеров уже давно есть fetch api:

fetch('http://country.io/names.json')
  .then(r => r.json())
  .then(names => console.log('Names arrived!', names)

Узнать больше можно из документации:

• https://developer.mozilla.org/ru/docs/Web/API/Fetch_API
  
• https://developer.mozilla.org/ru/docs/Web/API/Fetc...
  
• https://developer.mozilla.org/ru/docs/Web/API/Response
  

Ну и про CORS не забывайте - если сервер не вернет эти заголовки, то запрос на другой домен не пройдет.

Answer 2

[Дмитрий Еремин]

На чистом JS вот так
сам адрес, куда стучаться, у вас есть

var names = {} //тут у нас будет результат
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://country.io/names.json', false);
xhr.send();
if (xhr.status != 200) {
  // обработать ошибку
  alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found
} else {
  // вывести результат
  names = xhr.responseText;
}

Comments

[tarthur]

не выходит.
я думаю это связано с разными доменами.
я запуская локальный сервер, а беру данные с другого домена, то есть с country.io
если напр. создать .json файл напр. в корне моего сайта и стучатся к нему /myjson.json то все выходит(то есть подставить сюда:
xhr.open('GET', '/myjson.json', false);)

[Дмитрий Еремин]

tarthur: видимо, дело, действительно в доменах
я этот код в консольке браузера проверял.
Зашел на country.io/names.json и вызвал код в консоли

Answer 3

[Андрей Павленко]

https://www.w3schools.com/js/js_json_parse.asp
для >=IE 8

Answer 4

[holymotion]

У вас скорее всего ошибка CORS, и сервер не возвращает заголовок Access-Control-Allow-Origin: *. Если вам не нужно отправлять каких-то заголовков на сервер попробуйте использовать jsonp. https://www.npmjs.com/package/fetch-jsonp - может подойдет на реакте
https://learn.javascript.ru/ajax-jsonp - js

Comments

[Максим]

holymotion это как-то позволяет обходить CORS ?

[holymotion]

Максим:

Если создать тег script src, то при добавлении в документ запустится процесс загрузки src. В ответ сервер может прислать скрипт, содержащий нужные данные.

Таким образом можно запрашивать данные с любого сервера, в любом браузере, без каких-либо разрешений и дополнительных проверок.

Протокол JSONP – это «надстройка» над таким способом коммуникации. Здесь мы рассмотрим его использование в деталях.

[holymotion]

Максим: Другой способ - это создание прокси-сервера с настройкой заголовков и т.п., который будет перенаправлять запрос на конечный сервер