javascript - 从数组创建 HTML 表

问题描述

我从 Internet 获得了一张 Sheet，我首先获取它，然后将其处理为 JSON (processDataasJSON)。

之后的数组看起来只是一个简短的示例：

[object Object] {
  Bunker fuels (Not in Total): 9,
  Cement: 162,
  Country: "ZIMBABWE",
  Gas Flaring: 0,
  Gas Fuel: 0,
  Liquid Fuel: 1119,
  Per Capita: 0.21,
  Solid Fuel: 1902,
  Total: 3184,
  Year: 2013
}, [object Object] {
  Bunker fuels (Not in Total): 9,
  Cement: 14,
  Country: "AFGHANISTAN",
  Gas Flaring: 0,
  Gas Fuel: 74,
  Liquid Fuel: 1393,
  Per Capita: 0.08,
  Solid Fuel: 1194,
  Total: 2675,
  Year: 2014
}, [object Object] {
  Bunker fuels (Not in Total): 23,
  Cement: 299,
  Country: "ALBANIA",
  Gas Flaring: 0,
  Gas Fuel: 16,
  Liquid Fuel: 1053,
  Per Capita: 0.54,
  Solid Fuel: 191,
  Total: 1559,
  Year: 2014

如您所见，每年都有许多不同的年份和许多条目。

我现在想制作一个表格，其中只列出每一年和一个加在一起的所有国家总计的总计。

任何想法或帮助？

该表应如下所示：

桌子

标签： javascripthtmlarrays

这是我将如何解决这个问题。首先创建一个带有表格轮廓的 HTML 文件：

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table From JSON</title>
  <style type="text/css">
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Table From JSON</h1>
  <table>
    <thead>
      <tr>
        <th>Year</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <!-- createRow inserts rows here -->
    </tbody>
</table>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>

然后，在中main.js，创建一个formattedData对象并使用 JSON 数据中的总数填充它。正如塞巴斯蒂安在他的回答中所说，您可以使用它Array.prototype.reduce来创建一个包含每年总数的对象。然后，您可以从此对象中提取数据以填充行。我在这里使用了一些虚拟数据，但是只要您使用正确的密钥，这应该适用于您的文件。

main.js

const tbody = document.querySelector('tbody');

const data = [
  {
    Total: 123,
    Year: 2014,
  },
  {
    Total: 100,
    Year: 2015,
  },
  {
    Total: 200,
    Year: 2014,
  },
  {
    Total: 300,
    Year: 2015,
  },
];

const formattedData = data.reduce((acc, val) => {
  acc[val.Year] ? acc[val.Year] += val.Total : acc[val.Year] = val.Total;
  return acc;
}, {})

const createRow = (year, total) => {
  const tr = document.createElement('tr');
  const yearTd = document.createElement('td');
  const totalTd = document.createElement('td');
  yearTd.textContent = year;
  totalTd.textContent = total;
  tr.appendChild(yearTd);
  tr.appendChild(totalTd);
  tbody.appendChild(tr);
};

for (let year in formattedData) {
  createRow(year, formattedData[year])
}

这是项目的 JSFiddle 的链接，因此您可以实时编辑：JSON To Table。这是我机器上的截图。

javascript - 从数组创建 HTML 表

问题描述

解决方案

推荐阅读