Question

我正在学习javascript，并使用Fetch从URL检索和解析一些JSON。控制台记录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的{{1}}中，因此您应该说：

positions

请注意，document.getElementById('online').innerHTML = `THERE ARE CURRENTLY ${json.positions.length} CHASERS LIVE`;` document.getElementById('name').innerHTML = `${json.positions[0].name}`;也应拼写为lenght：-）

Answer 2

看起来positions是您要返回的名为json的对象中的键。

尝试使用

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

如何将JSON数组与模板文字一起使用？

2 个答案: