Javascript 如何从JSON数据中获取要填充的表行？

我在玩星球大战的API。我制作了一个表格，其中将显示这个JSON数组在Vanilla Javascript中取自“people”对象的每个字符的名称：

{
    "name": "Human", 
    "classification": "mammal", 
    "designation": "sentient", 
    "average_height": "180", 
    "skin_colors": "caucasian, black, asian, hispanic", 
    "hair_colors": "blonde, brown, black, red", 
    "eye_colors": "brown, blue, green, hazel, grey, amber", 
    "average_lifespan": "120", 
    "homeworld": "https://swapi.co/api/planets/9/", 
    "language": "Galactic Basic", 
    "people": [
        "https://swapi.co/api/people/1/", 
        "https://swapi.co/api/people/4/", 
        "https://swapi.co/api/people/5/", 
        "https://swapi.co/api/people/6/", 
        "https://swapi.co/api/people/7/", 
        "https://swapi.co/api/people/9/", 
        "https://swapi.co/api/people/10/", 
        "https://swapi.co/api/people/11/", 
        "https://swapi.co/api/people/12/", 
        "https://swapi.co/api/people/14/", 
        "https://swapi.co/api/people/18/", 
        "https://swapi.co/api/people/19/", 
        "https://swapi.co/api/people/21/", 
        "https://swapi.co/api/people/22/", 
        "https://swapi.co/api/people/25/", 
        "https://swapi.co/api/people/26/", 
        "https://swapi.co/api/people/28/", 
        "https://swapi.co/api/people/29/", 
        "https://swapi.co/api/people/32/", 
        "https://swapi.co/api/people/34/", 
        "https://swapi.co/api/people/43/", 
        "https://swapi.co/api/people/51/", 
        "https://swapi.co/api/people/60/", 
        "https://swapi.co/api/people/61/", 
        "https://swapi.co/api/people/62/", 
        "https://swapi.co/api/people/66/", 
        "https://swapi.co/api/people/67/", 
        "https://swapi.co/api/people/68/", 
        "https://swapi.co/api/people/69/", 
        "https://swapi.co/api/people/74/", 
        "https://swapi.co/api/people/81/", 
        "https://swapi.co/api/people/84/", 
        "https://swapi.co/api/people/85/", 
        "https://swapi.co/api/people/86/", 
        "https://swapi.co/api/people/35/"
    ], 
    "films": [
        "https://swapi.co/api/films/2/", 
        "https://swapi.co/api/films/7/", 
        "https://swapi.co/api/films/5/", 
        "https://swapi.co/api/films/4/", 
        "https://swapi.co/api/films/6/", 
        "https://swapi.co/api/films/3/", 
        "https://swapi.co/api/films/1/"
    ], 
    "created": "2014-12-10T13:52:11.567000Z", 
    "edited": "2015-04-17T06:59:55.850671Z", 
    "url": "https://swapi.co/api/species/1/"
}

这是我到目前为止使用的普通javascript：

const url = 'https://swapi.co/api/species/1/?format=json';

function fetchData(url) {
    return fetch(url).then((resp) => resp.json());
}

function constructTableRow(data) {
     const row = document.createElement('tr');
     const datum = 'https://swapi.co/api/people/';
     data.forEach((datum) => {
       row.appendChild(constructElement('td', datum));
    });
    return row;

 function constructElement(tagName, text, cssClasses) {
     const el = document.createElement(tagName);
     const content = document.createTextNode(text);
     el.appendChild(content);
     if (cssClasses) {
        el.classList.add(...cssClasses);
     }
        return el;
     }

     const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0];
      fetchData('https://swapi.co/api/people/').then((data) => {
         const row = constructTableRow([
             data.name, 
             data.height, 
             data.mass, 
             data.hair_color
         ]);
         swTable.appendChild(row);
      });

---

一旦我运行了这段代码，我的行和列就没有定义。我在最初的函数

fetchData（url）

中运行了一个console.log，它写出了所有的人。我错过了什么？任何帮助都将不胜感激

代码中存在一些问题：

首先，您没有正确关闭函数定义

ConstructableRow

缺少结束符

}

其次，如果在调用

fetchData

之后调用了

console.log（data）

，您将看到调用的

数据是一个包含
结果数组的对象。您需要遍历该数组来构造每一行

我不确定您的最终产品到底是什么样子的，但我已经更新了
ConstructableRow
，希望收到一个单独的对象，您可以从数据中解构并创建四列。这意味着我还编辑了
fetchData
，以迭代每个结果，并将该对象的值发送到
ConstructableRow
。这取决于您自己如何以及在何处解构数据，以及您可能希望如何设置表的样式和/或添加标题


consturl='1〕https://swapi.co/api/species/1/?format=json';
函数获取数据（url）{
返回fetch（url）.then（（resp）=>resp.json（））；
}
函数constructTableRow（数据）{
const row=document.createElement（'tr'）；
常数{名称、高度、质量、头发颜色}=数据；
appendChild行（constructElement（'td'，name））
行.appendChild（构造函数元素（'td'，高度））
行.appendChild（constructElement（'td'，mass））
行.appendChild（constructElement（'td'，头发颜色））
返回行；
}
函数构造函数元素（标记名、文本、cssClasses）{
const el=document.createElement（标记名）；
const content=document.createTextNode（文本）；
el.附件（内容）；
if（cssClasses）{
el.classList.add（…cssClasses）；
}
返回el；
}
const swTable=document.getElementById（'sw-table'）.getElementsByTagName（'tbody'）[0]；
获取数据（'https://swapi.co/api/people/）。然后（（数据）=>{
//控制台日志（数据）；
data.results.forEach（结果=>{
const row=constructablerow（结果）；
swTable.appendChild（行）；
});
});
td{
边界：无；
}
td:N个孩子（单数）{
背景：珊瑚；
}
td:n个孩子（偶数）{
背景：水鸭；
颜色：白色；
}

constructElement（）的定义在哪里？你能提供吗？另外，当您在
人员
端点上调用
获取数据
时，您应该返回一个对象数组
数据。结果
，而不仅仅是一个对象。如果我们能看到您代码的其余部分，您就接近了。@wlh很抱歉，我现在要添加它。我只是想添加最相关的代码。谢谢你的回复谢谢。我真不敢相信我把结尾的卷曲括号忘了。如何从url获取人员列表？我尝试更改
函数constructTableRow（data）{const row=document.createElement（'tr'）；const{name，height，mass，hair_color}=data；row.appendChild（constructElement（'td'，people.name））row.appendChild（constructElement（'td'，people.height））row.appendChild（constructElement（'td'，people.mass））row.appendChild（constructElement（'td'，people.hair_color））返回row；}
它只能返回所有人的名字