Как отобразить ответ json в таблице html - PullRequest
Новая
       39

Как отобразить ответ json в таблице html

0 голосов
/ 27 апреля 2020

Я знаю, что проблема в data.map. Может быть, потому что карта создана для массивов, а у меня есть массив объектов, а не массив?

Ответ API: 

[
  {
    "id": 16,
    "nachname": "Köpper",
    "vorname": "Chris",
    "projectList": []
  },
  {
    "id": 13,
    "nachname": "Kämpfer",
    "vorname": "Gerrit",
    "projectList": [
      {
        "id": 9,
        "name": "FB.de"
      },
      {
        "id": 7,
        "name": "DFBnet"
      }
    ]
  },
  {
    "id": 12,
    "nachname": "Voges",
    "vorname": "Arved",
    "projectList": [
      {
        "id": 9,
        "name": "FB.de"
      },
      {
        "id": 7,
        "name": "DFBnet"
      }
    ]
  }
]

HTML -Table: 

<table class="table" id="output1">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Vorname</th>
                <th scope="col">Nachname</th>
            </tr>
        </thead>
        <tbody>

        </tbody>

    </table>

js: 

function getPerson(){
fetch(url)
    .then(res => res.json())
    .then(data => {
        var tableContent = document.querySelector('#output1 > tbody');
        data.map(function(instance) {
            const row = document.createElement('tr');
            tableContent.appendChild(row);
            instance.map(function(info) {
                const cell = document.createElement('td');
                cell.innerText = info;
                row.appendChild(cell);
            });
        });
    })
}

Ответы [ 3 ]

1 голос
/ 27 апреля 2020

Я сделал jsfiddle, чтобы помочь вам. Карта предназначена для массива, поэтому вам не хватает одного шага (повторяйте атрибуты объекта, один для ячейки). 

let content = [{
    "id": 16,
    "nachname": "Köpper",
    "vorname": "Chris",
    "projectList": []
  },
  {
    "id": 13,
    "nachname": "Kämpfer",
    "vorname": "Gerrit",
    "projectList": [{
        "id": 9,
        "name": "FB.de"
      },
      {
        "id": 7,
        "name": "DFBnet"
      }
    ]
  },
  {
    "id": 12,
    "nachname": "Voges",
    "vorname": "Arved",
    "projectList": [{
        "id": 9,
        "name": "FB.de"
      },
      {
        "id": 7,
        "name": "DFBnet"
      }
    ]
  }
]


function getPerson() {
  Promise.resolve(content)
    //fetch(url).then(res => res.json())
    .then(data => {
      var tableContent = document.querySelector('#output1 > tbody');
      data.map(function(instance) {
        const row = document.createElement('tr');

        for (let c of ['id', 'nachname', 'vorname']) {
          let cell = document.createElement('td');
          if (instance.hasOwnProperty(c)) {
              cell.innerText = instance[c]
          }

          row.appendChild(cell)
        }

        tableContent.appendChild(row)
      });
    })
}

getPerson()
<table class="table" id="output1">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Vorname</th>
      <th scope="col">Nachname</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
1 голос
/ 27 апреля 2020

Если data - это массив объектов, тогда instance - это один отдельный объект в этом массиве. Вы не можете map над объектом напрямую. Если вы пытаетесь создать ячейку таблицы для каждой пары ключ / значение, я бы посоветовал взглянуть на Object.values() или Object.entries, чтобы создать массив, который затем можно будет повторять (map).

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

Что-то вроде: 

Object.values(instance).map(function(info) {
  const cell = document.createElement('td');
  cell.innerText = info.toString();
  row.appendChild(cell);
});

Хотя вам нужно будет решить, как вы хотите представлять projectList также в таблице, возможно, повторяя итерацию и создавая внутреннюю таблицу или объединяя значения вместе в строку.

Если я упускаю что-то важное в вашем случае использования, не стесняйтесь комментировать, и я буду изменить мой ответ.

0 голосов
/ 27 апреля 2020

Нет, проблема не в data.map, потому что функция map работает с любым типом массива, будь то простой массив или массив объектов. Проблема в вашем коде касается instance.map, так как отдельный элемент массива данных является объектом. Поэтому либо мы можем использовать оператор for...in, как показано ниже 

function getPerson() {
      fetch(url)
      .then(res => res.json())
      .then(data => {
        var tableContent = document.querySelector('#output1 > tbody');
        data.map(function (instance) {
          const row = document.createElement('tr');
          tableContent.appendChild(row);
          for (key in instance) {
            if (key !== 'projectList') {
              const cell = document.createElement('td');
              cell.innerText = instance[key];
              row.appendChild(cell);
            }
          }
        });
      })
    }
...