Creat a HTML Table from an Array

Question

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

I think this can be achieved with some `for` loops. You could try this: https://stackoverflow.com/questions/15164655/generate-html-table-from-2d-javascript-array. Is this how you want it look like? — adelriosantiago, Jan 15 '20 at 00:44
i thought of 2 for loops, too. One that cycles over every Object, an one in the other one, that adds the totals for every year. But how to search for the years and the totals in the List? — Schwente, Jan 15 '20 at 00:50
Can you be more specific about the exact structure of the table? Maybe create a simple diagram of what you are looking for? Or even stub-out a version with hard-coded data in an HTML table so we can be sure we know what you're trying to accomplish? — djs, Jan 15 '20 at 01:09
please provide example /expected table so we know what you want to achieve . — Ray, Jan 15 '20 at 01:11

Sebastian Brockly · Answer 1 · 2020-01-15T01:08:32.683

0

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

edited Jan 15 '20 at 01:08

answered Jan 15 '20 at 01:03

Sebastian Brockly

79
4

djs · Answer 2 · 2020-01-15T01:57:51.287

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.

score 0 · Answer 3 · answered Jan 15 '20 at 01:38

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.

Creat a HTML Table from an Array

3 Answers3