Как получить json файл по ссылке в таблицу html?

Question

[Danya Kozlovskiy]

Здравствуйте, надо получить json файл из ссылки, потом преобразовать его в человеческий вид чтобы можно было работать с его значениями и выводить в таблицу html. Но не знаю как это сделать. Чтение подобных вопросов порождало только ошибки в консоли или пустой вывод. Желательно с комментариями, что и зачем делаем если можно.

JSON лежит на сайте в таком виде:

[{"price":10201,"quantity":4,"name":"\u0421\u0442\u0443\u043b \u043e\u0444\u0438\u0441\u043d\u044b\u0439"},{"price":12862,"quantity":5,"name":"\u041c\u0430\u0440\u043a\u0435\u0440\u044b \u043e\u0444\u0438\u0441\u043d\u044b\u0435"},{"price":15523,"quantity":6,"name":"\u041a\u0430\u043d\u0446\u0435\u043b\u044f\u0440\u0441\u043a\u0438\u0439 \u043d\u0430\u0431\u043e\u0440"},{"price":16411,"quantity":6,"name":"\u0412\u043e\u0434\u0430 \u0431\u0443\u0442\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f"},{"price":15967,"quantity":6,"name":"\u0411\u0443\u043c\u0430\u0433\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043d\u0442\u0435\u0440\u0430"},{"price":10201,"quantity":4,"name":"\u0428\u043a\u0430\u0444 \u043a\u043d\u0438\u0436\u043d\u044b\u0439"},{"price":17298,"quantity":6,"name":"\u0427\u0430\u0439\u043d\u0438\u043a \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0439"},{"price":8870,"quantity":3,"name":"\u0421\u0432\u0435\u0442\u0438\u043b\u044c\u043d\u0438\u043a"},{"price":8870,"quantity":3,"name":"\u041c\u043e\u043d\u0438\u0442\u043e\u0440 22\u2033"},{"price":11975,"quantity":4,"name":"\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a"},{"price":15523,"quantity":6,"name":"\u0414\u0432\u0435\u0440\u044c \u043c\u0435\u0436\u043a\u043e\u043c\u043d\u0430\u0442\u043d\u0430\u044f"},{"price":13749,"quantity":5,"name":"\u041b\u0430\u0437\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u0438\u043d\u0442\u0435\u0440"},{"price":14636,"quantity":5,"name":"\u0421\u0442\u043e\u043b \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u044b\u0439"}]

Формат возвращаемых данных, пример:

[
  {
    "price": 9685,
    "quantity": 3,
    "name": "Бумага для принтера"
  },
  {
    "price": 13896,
    "quantity": 5,
    "name": "Шкаф книжный"
  },
  {
    "price": 14739,
    "quantity": 5,
    "name": "Канцелярский набор"
  }
]

Answer 1

[Tim]

$.ajax({
  method: 'GET',
  url: 'https://jsonplaceholder.typicode.com/users',
  dataType: 'json',
  success: data => {
    console.log(data)
   //тут работаем с data. это преобразованный json которую мы получили в ответ от сервера
   // проходим циклом и выводим в таблицу нужные данные
  }
})

Comments

[Danya Kozlovskiy]

Tim, а можно как-то вынести data из success в переменную чтобы дальше работать с этой переменной в скрипте?

[Tim]

morto, можно. Можно так присвоить глобально, а можно сделать калбек функцию

$.ajax({
  method: 'GET',
  url: 'https://jsonplaceholder.typicode.com/users',
  dataType: 'json',
  success: data => {
    window.data = data
  }
})

[Danya Kozlovskiy]

Tim, а если на примере с другой переменной? Допустим я хочу чтобы json файл был доступен из переменной myArray, как его туда засунуть?

[Tim]

morto,

function getUsers() {
  return new Promise(resolve => {
    $.ajax({
      method: 'GET',
      url: 'https://jsonplaceholder.typicode.com/users',
      dataType: 'json',
      success: data => {
        resolve(data)
      }
    })
  })
}


let myArray = getUsers();
async function test() {
  console.log(await myArray);
}

test();

[Tim]

morto, так можно присвоить, но использовать сразу не получится. В примере можно использовать сразу

let myArray = null;

 $.ajax({
      method: 'GET',
      url: 'https://jsonplaceholder.typicode.com/users',
      dataType: 'json',
      success: data => {
        myArray = data
      }
 })

[Danya Kozlovskiy]

Tim, спасибо большое.

[Danya Kozlovskiy]

Tim, а можете еще объяснить почему во втором случае сразу нельзя использовать. И как в первом случае потом использовать этот массив, писать всё в ассинхронной функции и писать await или можно как-то сразу всё в переменную засунуть и больше не возвращаться к этому? ( просто пытаюсь понять, что происходит )

[Danya Kozlovskiy]

Tim, немного покапался вроде что-то получатся, мне теперь всегда использовать асинхронные функции получается?

[Tim]

morto, во втором случае неизвестно когда ответит сервер и поэтому значения сразу не запишутся. Во втором случае вы можете в глобальную переменную засунуть данные из асинхронной функции и потом обращаться из любого места к глобальной переменной

[Tim]

morto, примерно так

let myArray;
function getUsers() {
  return new Promise(resolve => {
    $.ajax({
      method: 'GET',
      url: 'https://jsonplaceholder.typicode.com/users',
      dataType: 'json',
      success: data => {
        resolve(data)
      }
    })
  })
}


async function test() {
  myArray = await getUsers();
}

test();

[Danya Kozlovskiy]

Tim, но если я потом пишу console.log(myArray), то пишет что значение не найдено.

[Tim]

morto,

[Danya Kozlovskiy]

Tim, спасибо, вроде понял.

Answer 2

[Denis Melnikov]

Читаем JSON, циклом делаем таблицу, впихиваем в DOM