使用 Javascript 和 JSON.parse 解析多维数组答案

【问题标题】：Use Javascript and JSON.parse to parse through multidimentional array使用 Javascript 和 JSON.parse 解析多维数组
【发布时间】：2018-12-17 18:29:33
【问题描述】：

我有以下代码，对于一个简单的数组，它工作得很好，但是现在当使用更复杂的多维数据数组时，我似乎无法提取正确的值。我得到的 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();

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

【问题讨论】：

你应该提供一个例子来说明你如何以及在哪里can't seem to pull the right values

标签： javascript json parsing multidimensional-array

【解决方案1】：

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

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);
});

这是一个显示完整工作示例的 sn-p：

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>

【讨论】：

嗯，我试过了，但仍然没有数据通过。我认为为了确保问题不是我的令牌和身份验证，我将使用 JSON 数据创建一个虚拟文件并重写它。一旦我这样做了，我会在今天下午回来并发布结果。感谢您的帮助。
我刚刚在答案中添加了一个 sn-p，显示此方法无需 api 请求即可工作。
如果您不确定请求的响应中会返回什么，您可以使用console.log(JSON.stringify(testdata)) 或使用浏览器开发工具的“网络”部分来记录请求和响应并看看那里的细节。