如何獲取要從JSON數據填充的表行？

Question

我正在玩星球大戰API。 我制作了一個表格，該表格將顯示“人”對象中每個字符的名稱，該對象是從JSON數組（使用Vanilla Javascript）從https://swapi.co/api/species/1/獲取的：

{
    "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，它寫出了所有的人。 我想念什么？ 任何幫助將非常感激。

Answer 1

代碼有一些問題：

首先，您沒有正確關閉函數定義。 constructTableRow沒有結束符} 。

其次，如果在調用fetchData之后fetchData調用console.log(data)您將看到來自調用https://swapi.co/api/people/的data是一個包含results數組的對象。 您需要遍歷該數組以構造每一行。

我不確定最終產品的外觀，但我已經更新了constructTableRow ，希望收到一個可以解構的對象，並根據數據創建四列。 這意味着我還編輯了fetchData以遍歷每個結果，並將該對象的值發送到constructTableRow 。 由您自己決定如何以及在何處解構數據，以及如何樣式化表和/或添加標題。

 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 { name, height, mass, hair_color } = data; row.appendChild(constructElement('td', name)) row.appendChild(constructElement('td', height)) row.appendChild(constructElement('td', mass)) row.appendChild(constructElement('td', hair_color)) 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) => { //console.log(data); data.results.forEach(result => { const row = constructTableRow(result); swTable.appendChild(row); }); }); 

 td { border: none; } td:nth-child(odd) { background: coral; } td:nth-child(even) { background: teal; color:white; } 

 <table id='sw-table'> <tbody> </tbody> </table>