表 header 和带有 object 的主体

Question

我对 javascript 和表格有点陌生，我想根据标题 object 和表格正文与项目 Z09268CFFDE8931311 在这个例子中，我尝试了一个数组。

var data = [
    ['Book', 'Author', 'Year'],
    ['The Great Gatsby', 'Scott Fitzgerald', '1925'],
    ['The Grapes of Wrath', 'John Steinbeck', '1939'],
    ['A Wild Sheep Chase', 'Haruki Murakami', '1982']
  ] 
  
  var table = document.createElement('table');
document.body.appendChild(table);

data.forEach(function(row) {
  var tr = document.createElement('tr'); /
  table.appendChild(tr); 
  row.forEach(function(column) {
    var td = document.createElement('td');
    tr.appendChild(td);
    td.innerText = column; 
  });
});

但不是数据数组，我想用数据 object 构建同一个表。 我可以在我的 function 上更改什么？

"data": {
    "headings": [
      {
        "displayName": "Book",
        "columnID": "bookID"
      },
      {
        "displayName": "Author",
        "columnID": "authorID"
      },
      {
        "displayName": "Year",
        "columnID": "yearID"
      },
      {
        "displayName": "",
        "columnID": "urlID"
      }
    ],
    "items": [
      {
        "bookID": "The Great Gatsby",
        "authorID": " F Scott Fitzgerald",
        "yearID": "1925",
        "urlID": "https://google.com"
      },
      {
        "bookID": "The Grapes of Wrath",
        "authorID": "John Steinbeck",
        "yearID": "1939",
        "urlID": "https://google.com"
      },
      {
        "bookID": "A Wild Sheep Chase",
        "authorID": "Haruki Murakami",
        "yearID": "1982",
        "urlID": "https://google.com"
      },
      {
        "bookID": "A Farewell to Arms",
        "authorID": "Ernest Hemingway",
        "yearID": "1929",
        "urlID": "https://google.com"
      }
    ]
  }

Answer 1

您不能在 object 上调用.forEach() function。

您可以创建两个函数，其中一个负责创建表格的头部，第二个 function 负责创建表格的主体部分。 将headings数组传递给负责创建表头的 function 并将items数组传递给负责创建表体的 function。

 const data = { headings: [ { displayName: 'Book', columnID: 'bookID' }, { displayName: 'Author', columnID: 'authorID' }, { displayName: 'Year', columnID: 'yearID' }, { displayName: 'URL', columnID: 'urlID' } ], items: [ { bookID: 'The Great Gatsby', authorID: ' F Scott Fitzgerald', yearID: '1925', urlID: 'https://google.com' }, { bookID: 'The Grapes of Wrath', authorID: 'John Steinbeck', yearID: '1939', urlID: 'https://google.com', }, { bookID: 'A Wild Sheep Chase', authorID: 'Haruki Murakami', yearID: '1982', urlID: 'https://google.com', }, { bookID: 'A Farewell to Arms', authorID: 'Ernest Hemingway', yearID: '1929', urlID: 'https://google.com' } ] }; function displayTable(data) { const table = document.createElement('table'); createTableHead(table, data.headings); createTableBody(table, data.items); document.body.appendChild(table); } function createTableHead(table, headings) { const tHead = table.createTHead(); const headRow = tHead.insertRow(); headings.forEach(({displayName}) => { const th = document.createElement('th'); th.textContent = displayName; headRow.appendChild(th); }); } function createTableBody(table, items) { const tbody = document.createElement('tbody'); items.forEach(({bookID, authorID, yearID, urlID}) => { const row = tbody.insertRow(); row.insertCell().textContent = bookID; row.insertCell().textContent = authorID; row.insertCell().textContent = yearID; row.insertCell().textContent = urlID; }); table.appendChild(tbody); } displayTable(data);

 table, tr, th, td { border: 1px solid; border-collapse: collapse; text-align: center; padding: 5px; }

Answer 2

您可以循环通过 object for for in 。

 var data = { "headings": [ { "displayName": "Book", "columnID": "bookID" }, { "displayName": "Author", "columnID": "authorID" }, { "displayName": "Year", "columnID": "yearID" }, { "displayName": "", "columnID": "urlID" } ], "items": [ { "bookID": "The Great Gatsby", "authorID": " F Scott Fitzgerald", "yearID": "1925", "urlID": "https://google.com" }, { "bookID": "The Grapes of Wrath", "authorID": "John Steinbeck", "yearID": "1939", "urlID": "https://google.com" }, { "bookID": "A Wild Sheep Chase", "authorID": "Haruki Murakami", "yearID": "1982", "urlID": "https://google.com" }, { "bookID": "A Farewell to Arms", "authorID": "Ernest Hemingway", "yearID": "1929", "urlID": "https://google.com" } ] } var table = document.createElement('table'); document.body.appendChild(table); for (const field in data) { if(field == "headings"){ var tr = document.createElement('tr'); for (const child in data.headings) { var td = document.createElement('td'); tr.appendChild(td); td.innerText = data.headings[child].displayName; table.appendChild(tr); } } else if(field == "items"){ for (const child in data.items) { var tr = document.createElement('tr'); let item = data.items[child]; for (const row in item) { var td = document.createElement('td'); tr.appendChild(td); td.innerText = item[row]; table.appendChild(tr); } } } }

 table{border:1px solid #000;width:100%;}