如何使用 javascript 解码 json 循环数据答案

【问题标题】：How to decode json loop data using javascript如何使用 javascript 解码 json 循环数据
【发布时间】：2020-12-29 08:29:44
【问题描述】：

我正在使用包裹跟踪 API，它以 json 格式返回数据

我正在使用javascript来输出数据

前三个输出很完美，但问题是“current_status”和“statuses”有缩进/嵌套数据，如何输出？

const data = {
  "packet_id": "0024-00003711",
  "consignee_name": "Nasir maqbool",
  "destination": "Lahore",
  "current_status": {
    "status": "Assigned to Courier",
    "datetime": "2020-12-27T17:55:05.414Z",
    "comment": null
  },
  "statuses": [{
    "status": "Pickup request sent",
    "datetime": "2020-12-27T09:55:41.295Z",
    "comment": null
  }, {
    "status": "Booked",
    "datetime": "2020-12-26T10:13:15.333Z",
    "comment": null
  }]
}

let html = "";

html += '<div><strong>Packet Id:</strong> ' + data.packet_id + '</div>';
html += '<div><strong>Consignee Name:</strong> ' + data.consignee_name + '</div>';
html += '<div><strong>Destination:</strong> ' + data.destination + '</div>';
html += '<div><strong>Current Status:</strong>???</div>';
html += '<div><strong>Status:</strong> ???</div>';
$("#response").html(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="response"></div>

【问题讨论】：

currentstatus 不是单个值。currentstatus 的值中有对象
对于 current_status 就像这样：html += '<div><strong>Current Status:</strong>+data.current_status.status+ </div>';
我给你做了一个minimal reproducible example。由于 ajax 有效，因此根本不需要发布该部分
到目前为止你尝试过什么？你被困在哪里了？
你需要循环 arrays 并且你必须从 objects 中决定你需要什么！！对于数组，请检查：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript html jquery json

【解决方案1】：

你可以映射

const data = { "packet_id": "0024-00003711", "consignee_name": "Nasir maqbool", "destination": "Lahore", "current_status": { "status": "Assigned to Courier", "datetime": "2020-12-27T17:55:05.414Z", "comment": null }, "statuses": [{ "status": "Pickup request sent", "datetime": "2020-12-27T09:55:41.295Z", "comment": null }, { "status": "Booked", "datetime": "2020-12-26T10:13:15.333Z", "comment": null }] };


const curStatus = Object.entries(data.current_status)
  .map(entr => `<li>${entr[0]}:${entr[1]}</li>`) // map the entries 
  .join("") // join
  
const statuses = data.statuses
  .map(ent => Object.entries(ent) // map each status
    .map(entr => `<li>${entr[0]}:${entr[1]}</li>`) // map the entries in the statuses
      .join("") // join
  ).join("</ul><hr><ul>") // join with a separator
  
const html = `<div><strong>Packet Id:</strong>${data.packet_id}</div>
<div><strong>Consignee Name:</strong>${data.consignee_name}</div>
<div><strong>Destination:</strong>${data.destination}</div>
<div><strong>Current Status:</strong><ul>${curStatus}</ul></div>
<div><strong>Previous statuses:</strong><ul>${statuses}</ul></div>`
$("#response").html(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="response"></div>

【讨论】：