时间戳

首页 > 解决方案 > 使用 Javascript 和 JSON.parse 解析多维数组

javascript - 使用 Javascript 和 JSON.parse 解析多维数组

问题描述

我有以下代码，对于一个简单的数组，它工作得很好，但是现在当使用更复杂的多维数据数组时，我似乎无法提取正确的值。我得到的 JSON 如下：

{
  "kind": "tasks",
  "data": [
{
  "id": "1",
  "title": "TEST NAME 1",
  "status": "Active",
  "importance": "Normal",
  "createdDate": "2016-09-13T15:25:57Z",
  "updatedDate": "2016-09-13T15:25:57Z",
  "dates": {
    "type": "Planned",
    "duration": 43200,
    "start": "2018-10-10T09:00:00",
    "due": "2019-02-12T17:00:00"
  },
  "scope": "WsTask",
  "priority": "1a0448008000000000005000"
},
{
  "id": "2",
  "title": "TEST NAME 2",
  "status": "Active",
  "importance": "Normal",
  "createdDate": "2018-10-10T19:32:32Z",
  "updatedDate": "2018-12-17T16:46:06Z",
  "dates": {
    "type": "Planned",
    "duration": 43200,
    "start": "2018-10-11T09:00:00",
    "due": "2019-02-13T17:00:00"
  },
  "scope": "WsTask",
  "priority": "5bfa68008000000000003c00"
}
  ]
}

我正在使用的代码如下：

const app = document.getElementById('root');
const logo = document.createElement('img');

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(logo);
app.appendChild(container);

var request = new XMLHttpRequest();

request.setRequestHeader( 'Authorization', 'BEARER ' + 'PRIVATETOKEN');
request.open('GET', 'PRIVATEADDRESS', true);

request.onload = function () {

  // Begin accessing JSON data here
  var testdata = JSON.parse(this.response);

  if (request.status >= 200 && request.status < 400) {
    testdata.forEach(tasks => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');

      const h1 = document.createElement('h1');
      h1.textContent = tasks.title;

      container.appendChild(card);
      card.appendChild(h1);
    });
  } else {
    const errorMessage = document.createElement('marquee');
    errorMessage.textContent = 'Gah';
    app.appendChild(errorMessage);
  }
}

request.send();

一旦我得到一个工作样本，我可以扩展它以使用其他数据，但现在，我只需要帮助从数据数组中调用每个标题。

标签： javascriptjsonparsingmultidimensional-array

解决方案

假设testdata在您的第一个代码块中包含 JSON，testdata不是数组。它是一个data具有数组属性的对象。所以你需要像下面这样的东西（调用 forEachtestdata.data而不是testdata）。

testdata.data.forEach(tasks => {
    const card = document.createElement('div');
    card.setAttribute('class', 'card');

    const h1 = document.createElement('h1');
    h1.textContent = tasks.title;

    container.appendChild(card);
    card.appendChild(h1);
});

这是一个显示完整工作示例的片段：

const testdata = {
  "kind": "tasks",
  "data": [
{
  "id": "1",
  "title": "TEST NAME 1",
  "status": "Active",
  "importance": "Normal",
  "createdDate": "2016-09-13T15:25:57Z",
  "updatedDate": "2016-09-13T15:25:57Z",
  "dates": {
    "type": "Planned",
    "duration": 43200,
    "start": "2018-10-10T09:00:00",
    "due": "2019-02-12T17:00:00"
  },
  "scope": "WsTask",
  "priority": "1a0448008000000000005000"
},
{
  "id": "2",
  "title": "TEST NAME 2",
  "status": "Active",
  "importance": "Normal",
  "createdDate": "2018-10-10T19:32:32Z",
  "updatedDate": "2018-12-17T16:46:06Z",
  "dates": {
    "type": "Planned",
    "duration": 43200,
    "start": "2018-10-11T09:00:00",
    "due": "2019-02-13T17:00:00"
  },
  "scope": "WsTask",
  "priority": "5bfa68008000000000003c00"
}
  ]
};

const app = document.getElementById('root');
const container = document.createElement('div');
app.appendChild(container);
testdata.data.forEach(tasks => {
  const card = document.createElement('div');
  card.setAttribute('class', 'card');

  const h1 = document.createElement('h1');
  h1.textContent = tasks.title;

  container.appendChild(card);
  card.appendChild(h1);
});
.card {
  background-color: lightblue;
}
<html>
<body>
<div id="root">

</div>
</body>
</html>

推荐阅读