Summarize JSON in table

Question

I have small JSON like this:

let testJson = [
  {"date":"2019.05.21","name":"Péter","num":"8"}, 
  {"date":"2019.05.22","name":"Norbert","num":"6"}, 
  {"date":"2019.05.21","name":"Sándor","num":"7"}, 
  {"date":"2019.05.24","name":"Béla","num":"4"},    
  {"date":"2019.05.23","name":"Sándor","num":"5"},  
  {"date":"2019.05.26","name":"Sándor","num":"6"},  
  {"date":"2019.05.27","name":"Péter","num":"7"},  
  {"date":"2019.05.28","name":"Péter","num":"8"}, 
  {"date":"2019.05.29","name":"Péter","num":"3"}, 
  {"date":"2019.05.30","name":"Péter","num":"6"}, 
  {"date":"2019.05.31","name":"Péter","num":"4"}
];

I would like to aggregate the data like this:

I just want to display the table in an image in an angular application — Langosfun, Jul 14 '19 at 10:29
You can see the example in the picture. The first column shows the dates and the columns contain the "num" values for the names — Langosfun, Jul 14 '19 at 10:35

score 1 · Accepted Answer · answered Jul 14 '19 at 11:01

1

Try this:

let testJson = [
  {"date":"2019.05.21","name":"Péter","num":"8"}, 
  {"date":"2019.05.22","name":"Norbert","num":"6"}, 
  {"date":"2019.05.21","name":"Sándor","num":"7"}, 
  {"date":"2019.05.24","name":"Béla","num":"4"},    
  {"date":"2019.05.23","name":"Sándor","num":"5"},  
  {"date":"2019.05.26","name":"Sándor","num":"6"},  
  {"date":"2019.05.27","name":"Péter","num":"7"},  
  {"date":"2019.05.28","name":"Péter","num":"8"}, 
  {"date":"2019.05.29","name":"Péter","num":"3"}, 
  {"date":"2019.05.30","name":"Péter","num":"6"}, 
  {"date":"2019.05.31","name":"Péter","num":"4"}
];
const groupBy = (arr) => arr.reduce((acc, ele)=>( (acc[ele.date] = acc[ele.date] || []).push(ele), acc),{})
const reformat = ([k, v])=> ({date:k,...Object.assign({},...v.map(l=>({[l.name]:l.num})))})
const result = Object.entries(groupBy(testJson))
.map(ele=>reformat(ele));

console.log(result);

answered Jul 14 '19 at 11:01

Ghoul Ahmed

4,446
1
14
23

This works well, but how can I display values in a table? – Langosfun Jul 14 '19 at 11:07
@Langosfun, show this lien, it s very helpful, [converting-json-object-to-csv-format-in-javascript](https://stackoverflow.com/questions/11257062/converting-json-object-to-csv-format-in-javascript) – Ghoul Ahmed Jul 14 '19 at 11:20
There is no simple solution in angular (for example * ngFor) to display this? – Langosfun Jul 14 '19 at 11:37
@Langosfun, this is a solution with ngFor [working demo](https://stackblitz.com/edit/angular-h9slnb) :) – Ghoul Ahmed Jul 14 '19 at 11:48
Huge thanks for your help. Can names be written dynamically? – Langosfun Jul 14 '19 at 12:34
@Langosfun, yes we can :) [Working Demo](https://stackblitz.com/edit/angular-h9slnb) – Ghoul Ahmed Jul 14 '19 at 13:27
Hello! Sorry :( I have new problem...can i create this table easy from this json: http://pasted.co/e1e77b95 – Langosfun Jul 15 '19 at 19:50
@Langosfun i added an other solution in the below post :) – Ghoul Ahmed Jul 15 '19 at 21:40

score 0 · Answer 2 · answered Jul 15 '19 at 21:39

Other solution with this format example json format:

let testJson = [
  {"date":"2019.05.21","name":"Péter","num":"8"}, 
  {"date":"2019.05.22","name":"Norbert","num":"6"}, 
  {"date":"2019.05.21","name":"Sándor","num":"7"}, 
  {"date":"2019.05.24","name":"Béla","num":"4"},    
  {"date":"2019.05.23","name":"Sándor","num":"5"},  
  {"date":"2019.05.26","name":"Sándor","num":"6"},  
  {"date":"2019.05.27","name":"Péter","num":"7"},  
  {"date":"2019.05.28","name":"Péter","num":"8"}, 
  {"date":"2019.05.29","name":"Péter","num":"3"}, 
  {"date":"2019.05.30","name":"Péter","num":"6"}, 
  {"date":"2019.05.31","name":"Péter","num":"4"}
];
const groupBy = (arr) => arr.reduce((acc, ele)=>( (acc[ele.date] = acc[ele.date] || []).push(ele), acc),{})
const reformat = ([k, v])=> ({[k]:v.map((res,i)=>({id:i, name:res.name, datum:res.date, number:res.num}))})
const result = Object.entries(groupBy(testJson))
.map(ele=>reformat(ele));

console.log(result);

Not the json needs me but the "Angular" table :( – Langosfun Jul 16 '19 at 05:57 — Langosfun, Jul 16 '19 at 05:57

score 0 · Answer 3 · answered Jan 16 '23 at 18:45

Another option, that's easier to understand:

let testJson = [
  {"date":"2019.05.21","name":"Péter","num":"8"}, 
  {"date":"2019.05.22","name":"Norbert","num":"6"}, 
  {"date":"2019.05.21","name":"Sándor","num":"7"}, 
  {"date":"2019.05.24","name":"Béla","num":"4"},    
  {"date":"2019.05.23","name":"Sándor","num":"5"},  
  {"date":"2019.05.26","name":"Sándor","num":"6"},  
  {"date":"2019.05.27","name":"Péter","num":"7"},  
  {"date":"2019.05.28","name":"Péter","num":"8"}, 
  {"date":"2019.05.29","name":"Péter","num":"3"}, 
  {"date":"2019.05.30","name":"Péter","num":"6"}, 
  {"date":"2019.05.31","name":"Péter","num":"4"}
];


function summarizeJsonData (data) {
  let keyMap = {};
  let res = [];

  function insert (data) {
    let index = keyMap[data["date"]];
    if (!res[index][data['name']]) res[index][data['name']] = 0;
    res[index][data['name']] += data['num'] 
  }
  
  for (let d of data) {
    if (keyMap[d['date']] === undefined) {
      keyMap[d['date']] = res.length;
      res.push({date: d['date']});
    };
    insert(d)
  }

  return res;
}

console.log(summarizeJsonData(testJson))

Summarize JSON in table

3 Answers3