如何在 html table 中显示 json 响应

Question

我知道问题出在 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);
            });
        });
    })
}

Answer 1

如果 data 是一个对象数组，那么 instance 就是该数组中的一个对象。您不能直接在对象上 map。如果您尝试为每个 key/value 对创建一个 table 单元格，我建议您查看 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);
});

尽管您还需要决定如何在 table 中表示 projectList，也许可以通过再次迭代并创建内部 table 或将值连接在一起以一个字符串。

如果我遗漏了关于您的用例的一些重要信息，请随时发表评论，我会修改我的答案。

Answer 2

我制作了一个 jsfiddle 来帮助你。 Map 用于数组，因此您错过了一个步骤（迭代对象属性，一个用于单元格）。

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>

Answer 3

不，问题不在于 data.map，因为 map 函数适用于任何类型的数组，无论是普通数组还是 objects.The 代码中的问题是关于 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);
            }
          }
        });
      })
    }

如何在 html table 中显示 json 响应

How to display a json response in a html table

javascript

api

html-table

response