Javascript 从数组创建HTML表_Javascript_Html_Arrays

Javascript 从数组创建HTML表

javascript html arrays

Javascript 从数组创建HTML表,javascript,html,arrays,Javascript,Html,Arrays,我从互联网上得到了一张表，我首先获取它，然后作为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: 1

我从互联网上得到了一张表，我首先获取它，然后作为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

正如你所看到的，有许多不同的年份，每年都有许多参赛作品

我现在想做一个表格，只列出每一年的国家总数和所有国家总数的总和

有什么想法或帮助吗

该表应如下所示：

您可以使用Array.reduce并将其另存为对象：

var obj = data.reduce((acc, val) => {
    var total = val['Total']
    var year = val['Year']
    if (!acc[year]) {
        acc[year] = total
    } else {
        acc[year] += total
    }
    return acc
}, {})

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

index.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>

这里有一个指向项目JSFIDLE的链接，您可以编辑live:。这是我机器上的屏幕截图

您可以使用

Array.prototype.filter（）

为每年创建一个新数组，然后使用

Array.prototype.reduce（）

为每年的总计创建新对象，然后使用

Array.prototype.concat（）

将它们全部合并到一个总计数组中，然后使用

Array.prototype.map（）

进行迭代并创建表

我认为这可以通过一些

for

循环来实现。你可以试试这个：。这就是你想要的样子吗？我也想到了2个for循环。一个在每一个物体上循环，一个在另一个物体上循环，加上每年的总数。但是如何在列表中搜索年份和总数呢？你能更具体地描述一下表的确切结构吗？也许可以创建一个简单的图表，说明你在寻找什么？或者甚至在HTML表格中用硬编码数据删除一个版本，这样我们就可以确定我们知道你想要实现什么？请提供示例/预期表格，这样我们就知道你想要实现什么。我编辑了这篇文章，其中有一个图像链接

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