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

Question

I'm playing around with the star wars API. I made a table that will display the names of each character from the "people" object this JSON array taken from https://swapi.co/api/species/1/ in Vanilla Javascript:

{
    "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/"
}

This is the vanilla javascript I have so far:

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);
      });

Once I run this code I get undefined in the row and columns. I ran a console.log in the initial function fetchData(url) , which wrote out all the people. What am I missing? any help would be much appreciated.

Answer 1

There are a few issues here with the code:

First, you do not properly close out your function definitions. constructTableRow lacks a closing } .

Second, if just after your call to fetchData you called console.log(data) you will see that your data from calling https://swapi.co/api/people/ is an object that includes an array of results . You need to iterate through that array to construct each row.

I'm not sure exactly what you intend your final product to look like, but I have updated constructTableRow to expect to receive a single object that you will be able deconstruction and create four columns from the data. This means I also edited fetchData to iterate through each result and send the value of that object to constructTableRow . It is up to you how and where you want to deconstruct the data for yourself and how you might want to style the table and/or add headers.

 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>