Используйте Javascript и JSON.parse для разбора многомерного массива - PullRequest
0 голосов
/ 17 декабря 2018

У меня есть следующий код, и для простого массива он работает просто отлично, но теперь, когда используется более сложный многомерный массив данных, я не могу получить правильные значения.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();

Получив рабочий образец, я могу расширить его доиспользовать другие данные, но сейчас мне нужна помощь в вызове каждого заголовка из массива данных.

1 Ответ

0 голосов
/ 18 декабря 2018

Если testdata содержит JSON в вашем первом блоке кода, testdata не является массивом.Это объект со свойством data, который является массивом.Поэтому вам понадобится что-то вроде ниже (вызов forEach на testdata.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...