LaVOZs

The World’s Largest Online Community for Developers

'; javascript - Creat a HTML Table from an Array - LavOzs.Com

I got a Sheet from the Internet, which I first fetch and then process as JSON (processDataasJSON).

The Array after this looks like just an short Example:

[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

As you can see there are many different Years and many Entries for every Year.

I now want to make a Table which only lists every single year and a single Total of all the Countries Totals added together.

Any Ideas or Help?

The Table should look like this:

Table

You can use Array.reduce and save it as an Object:

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
}, {})

You could use Array.protoype.filter() to create a new array for each year, then use Array.prototype.reduce() to create new objects for each year's totals, then Array.protoype.concat() them all together into a totals array, then use Array.protoype.map() to iterate though and create your table.

Here's how I would solve this. First create an HTML file with the outline of your table:

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>

Then, in main.js, create a formattedData object and populate it with the totals from your JSON data. As Sebastian stated in his answer, you can use Array.prototype.reduce to create an object with the totals for each year. You can then pull the data from this object to populate the rows. I'm using some dummy data here, but this should work with your file as well as long as you use the correct keys.

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

Here's a link to a JSFiddle of the project so you can edit live: JSON To Table. Here's a screenshot of what that looks like on my machine.

JSON to Table

Related
Create GUID / UUID in JavaScript?
Create ArrayList from array
How do I remove a property from a JavaScript object?
How do I check if an array includes a value in JavaScript?
How to append something to an array?
Loop through an array in JavaScript
How to check if an object is an array?
How do I remove a particular element from an array in JavaScript?
Why does HTML think “chucknorris” is a color?
For-each over an array in JavaScript?