Как использовать массив JSON с литералом шаблона?

Question

Я изучаю javascript и использую Fetch для извлечения и анализа некоторых JSON из URL. Консоль регистрирует массив JSON, но когда я пытаюсь использовать его в литерале шаблона, я получаю сообщение об ошибке в консоли "positions is not defined". Вот где я зацикливаюсь, так как большинство примеров и учебных пособий не показывают формат JSON так, как я его получаю.

Как мне получить доступ к этому, чтобы я мог использовать его в литерале шаблона так, как я хочу, или есть лучший способ? Я не хочу проходить через него, так как хочу иметь возможность размещать определенные значения там, где мне нужно или нужно.

Пример кода, с которым я работаю:

let positionData = new Request('URL_TO_JSON')

  fetch(positionData)
    .then(function(response){
        return response.json();
    })
    .then(function(json){

        document.getElementById('online').innerHTML = `THERE ARE CURRENTLY ${positions.lenght} CHASERS LIVE`;

        document.getElementById('name').innerHTML = `${positions[0].name}`;

        console.log(json)
    })
    .catch(function(err) {
        console.log(`Error: ${err}` )
      });

В консоли он отображает массив JSON следующим образом:

{positions: Array(2)}
positions: Array(2)
0: {report_at: "2019-04-26 20:29:29", lat: "33.0851707", lon: "-96.8177032", elev: "0", dir: "0", …}
1: {report_at: "2019-04-26 05:07:29", lat: "33.0173721", lon: "-96.5511093", elev: "0", dir: "0", …}
length: 2
__proto__: Array(0)
__proto__: Object

Согласно учебным пособиям и видео, которые я смотрел, это показывает все, что мне нужно сделать, это, и я думаю, что именно здесь моя проблема из-за того, что JSON имеет префикс Positions.

document.getElementById('name').innerHTML = `${positions[0].name}`;

Но я получаю сообщение об ошибке «позиции не определены» в консоли.

Answer 1

Ваши данные находятся в json, который содержит positions, поэтому вы должны сказать:

document.getElementById('online').innerHTML = `THERE ARE CURRENTLY ${json.positions.length} CHASERS LIVE`;`

document.getElementById('name').innerHTML = `${json.positions[0].name}`;

Обратите внимание, что lenght также должно быть написано length: -)

Answer 2

Похоже, positions - это ключ в объекте с именем json, который вы возвращаете.

Попробуйте использовать

document.getElementById('name').innerHTML = `${json.positions[0].name}`;