Question

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

一旦获得一个有效的示例，就可以将其扩展为使用其他数据，但是现在，我只需要帮助即可从数据数组中调用每个标题。

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

以下是显示完整示例的代码段：

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>

使用Javascript和JSON.parse通过多维数组进行解析

1 个答案: