API JSON javascript 提取数据循环数组答案

【问题标题】：API JSON javascript extract data loop arrayAPI JSON javascript 提取数据循环数组
【发布时间】：2023-02-25 13:05:02
【问题描述】：

我已经成功地使用这种方法从 API 连接并获取 JSON 数据：

<script type="text/javascript"> 
   fetch('https://api.web_address.com/vi/locations/10', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer my_bearer_token'
    },
})
.then(response => {
    if (response.ok) {
      return response.json()

    } else {
      return Promise.reject({
        status: response.status,
        statusText: response.statusText
      })
    }
  })
.then(data => console.log('data is', data))
.catch(error => {
    if (error.status === 404) {
      // do something about 404
    }
  })
</script>

API 提供了以下数据：

{
    "message": "OK",
    "data": {
        "id": 10,
        "name": "First floor",
        "count": 96,
        "percentage": 0.06,
        "timestamp": "2023-02-25T03:53:25.279Z",
        "isActive": true,
        "childCounts": [
            {
                "id": 11,
                "name": "Room 101",
                "count": 36,
                "percentage": 0.1,
                "isActive": true
            },
            {
                "id": 12,
                "name": "Room 102",
                "count": 17,
                "percentage": 0.06,
                "isActive": true
            },
            {
                "id": 13,
                "name": "Room 103",
                "count": 12,
                "percentage": 0.04,
                "isActive": true
            }
        ]
    }
}

如何循环获取“名称”和“百分比”？我把循环放在哪里？希望描述对您来说很清楚，因为我已经尝试了又尝试，但无法使任何工作正常进行……请帮忙！

【问题讨论】：

标签： javascript arrays json api extract

【解决方案1】：

循环.data.childCounts。

let o = { "message": "OK", "data": { "id": 10, "name": "First floor", "count": 96, "percentage": 0.06, "timestamp": "2023-02-25T03:53:25.279Z", "isActive": true, "childCounts": [ { "id": 11, "name": "Room 101", "count": 36, "percentage": 0.1, "isActive": true }, { "id": 12, "name": "Room 102", "count": 17, "percentage": 0.06, "isActive": true }, { "id": 13, "name": "Room 103", "count": 12, "percentage": 0.04, "isActive": true } ] } };
for (const {name, percentage} of o.data.childCounts) {
  console.log(name, percentage);
}

【讨论】：

【解决方案2】：

我的答案：

let o = { "message": "OK", "data": { "id": 10, "name": "First floor", "count": 96, "percentage": 0.06, "timestamp": "2023-02-25T03:53:25.279Z", "isActive": true, "childCounts": [ { "id": 11, "name": "Room 101", "count": 36, "percentage": 0.1, "isActive": true }, { "id": 12, "name": "Room 102", "count": 17, "percentage": 0.06, "isActive": true }, { "id": 13, "name": "Room 103", "count": 12, "percentage": 0.04, "isActive": true } ] } };

o.data.childCounts.map((ele)=> {
  const {name, percentage} = ele;
  console.log(name, percentage)
})

希望对您有所帮助。

【讨论】：