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
– Langosfun, Commented Jul 14, 2019 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
– Langosfun, Commented Jul 14, 2019 at 10:35

Ghoul Ahmed · Accepted Answer · 2019-07-14 11:01:17Z

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, 2019 at 11:01

Ghoul Ahmed

4,8342 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Langosfun Over a year ago

This works well, but how can I display values in a table?

Ghoul Ahmed Over a year ago

@Langosfun, show this lien, it s very helpful, converting-json-object-to-csv-format-in-javascript

Langosfun Over a year ago

There is no simple solution in angular (for example * ngFor) to display this?

Ghoul Ahmed Over a year ago

@Langosfun, this is a solution with ngFor working demo :)

Langosfun Over a year ago

Huge thanks for your help. Can names be written dynamically?

|

Ghoul Ahmed · Accepted Answer · 2019-07-15 21:39:43Z

0

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);

answered Jul 15, 2019 at 21:39

Ghoul Ahmed

4,8342 gold badges17 silver badges25 bronze badges

1 Comment

Langosfun Over a year ago

Not the json needs me but the "Angular" table :(

osaro · Accepted Answer · 2023-01-16 18:45:46Z

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

Collectives™ on Stack Overflow

Summarize JSON in table

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related