Flatten an array object to single object - Javascript

Question

I'm using ChartKick to represent some data in the graphs in Multiple series line chart. The required format is:

let data = [
   { name: 'sharry', data: { '2008-08-02': 10006097, '2018-08-03': 10670, etc }},
   { name: 'stuart', data: { '2018-08-01' :1401231321, '2018-08-04': 2500000000, etc }}
];

The data I get from the database is:

let user_usage = [
  { "name":"stuart", "data": { "2018-08-02":10006097 } },
  { "name":"stuart", "data": { "2018-08-03":10670 } },
  { "name":"stuart", "data": { "2018-08-05":5800000 } },
  { "name":"stuart", "data": { "2018-08-07":10789000 } },
  { "name":"stuart", "data": { "2018-08-08":1033000000 } },
  { "name":"sharry", "data": { "2018-08-01":1401231321 } },
  { "name":"sharry", "data": { "2018-08-04":2500000000 } }
];

I've been trying for 2 days to get the database response into the required format above Any help greatly appreciated guys. Here is what I have so far. I'm using Ramda but ES6 is fine to use:

let chartdata = [];
let u = R.groupBy(R.prop('name'))(user_usage);

Object.keys(u).forEach((name, index) => {
  chartdata.push({ name , data: {} });
  let usage = u[name];

  Object.keys(usage).forEach(row => {
    let data = usage[row].data;
    let date = Object.keys(data)[0];
    let total = data[Object.keys(data)[0]];
    chartdata[index].data = Object.assign({}, {`${date}: ${total}`};
  });
});

what's wrong with what the OP wants @anttud? (hint: is IS valid) — Jaromanda X
– Jaromanda X, Commented Aug 9, 2018 at 10:59
considering you've produced the required result @AnkitAgarwal it wasn't hard to be correct :p — Jaromanda X
– Jaromanda X, Commented Aug 9, 2018 at 11:01

Ankit Agarwal · Accepted Answer · 2018-08-09 11:06:57Z

2

Use Array.reduce() with Object.assign() so that you can assign the data object to the existing item of the accumulator.

let user_usage = [
  { "name":"stuart", "data": { "2018-08-02":10006097 } },
  { "name":"stuart", "data": { "2018-08-03":10670 } },
  { "name":"stuart", "data": { "2018-08-05":5800000 } },
  { "name":"stuart", "data": { "2018-08-07":10789000 } },
  { "name":"stuart", "data": { "2018-08-08":1033000000 } },
  { "name":"sharry", "data": { "2018-08-01":1401231321 } },
  { "name":"sharry", "data": { "2018-08-04":2500000000 } }
];
var res = user_usage.reduce((acc, item) => {
  var existItem = acc.find(({name}) => name === item.name);
  if(existItem){
    Object.assign(existItem.data,item.data);
  } else {
    acc.push(item);
  }
  return acc;
}, 
[]);
console.log(res);

edited Aug 9, 2018 at 11:06

answered Aug 9, 2018 at 10:58

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

4 Comments

Jaromanda X Over a year ago

there's a little redundancy and repetition in your code ...

var res = user_usage.reduce((acc, item) => {   var existItem = acc.find(({name}) => name === item.name);   if (existItem){     Object.assign(existItem.data,item.data);   } else {     acc.push(item);   }   return acc; }, []);

Ankit Agarwal Over a year ago

@JaromandaX thanks. Appreciate that. Updated with your suggested code

molinto Over a year ago

Thanks for posting :)

Ankit Agarwal Over a year ago

@molinto glad to help you :)

Daphoque · Accepted Answer · 2018-08-09 11:01:56Z

1

var obj = {};
user_usage.forEach(function(e){
    if(!obj[e.name]){
       obj[e.name] = e.data;
    } else {
       obj[e.name] = Object.assign(obj[e.name], e.data)
    }
});
var array = Object.keys(obj).map(function(e){return {name: e, data: obj[e]}})

answered Aug 9, 2018 at 11:01

Daphoque

4,6781 gold badge24 silver badges35 bronze badges

1 Comment

molinto Over a year ago

Thanks for posting :)

Titus · Accepted Answer · 2018-08-09 11:04:29Z

0

You can do something like this:

let user_usage = [
  { "name":"stuart", "data": { "2018-08-02":10006097 } },
  { "name":"stuart", "data": { "2018-08-03":10670 } },
  { "name":"stuart", "data": { "2018-08-05":5800000 } },
  { "name":"stuart", "data": { "2018-08-07":10789000 } },
  { "name":"stuart", "data": { "2018-08-08":1033000000 } },
  { "name":"sharry", "data": { "2018-08-01":1401231321 } },
  { "name":"sharry", "data": { "2018-08-04":2500000000 } }
];

let data = user_usage.reduce((a, c) => {
  let key = Object.keys(c.data)[0];
  let found = a.find(v => v.name === c.name);
  if(found){
    found.data[key] = c.data[key];
  }else{
    a.push(c);
  }
  return a;
}, [])

console.log(data);

edited Aug 9, 2018 at 11:04

answered Aug 9, 2018 at 11:00

Titus

22.6k1 gold badge26 silver badges36 bronze badges

5 Comments

Jaromanda X Over a year ago

lots of undefined in your output

molinto Over a year ago

Thanks @titus, getting lots of 'undefined' when running though

Titus Over a year ago

@JaromandaX Yes, I've just notice that, is probably because I'm pushing references instead of new objects.

Titus Over a year ago

@molinto fixed it.

molinto Over a year ago

Thanks for posting :)

amrender singh · Accepted Answer · 2018-08-09 11:50:39Z

You can use Object.assign() and Map() for a more efficient solution:

let user_usage = [ { "name":"stuart", "data": { "2018-08-02":10006097 } }, { "name":"stuart", "data": { "2018-08-03":10670 } }, { "name":"stuart", "data": { "2018-08-05":5800000 } }, { "name":"stuart", "data": { "2018-08-07":10789000 } }, { "name":"stuart", "data": { "2018-08-08":1033000000 } }, { "name":"sharry", "data": { "2018-08-01":1401231321 } }, { "name":"sharry", "data": { "2018-08-04":2500000000 } } ];
var map = new Map();
user_usage.forEach((obj)=>{
  if(map.has(obj.name)){
    var mapObject = map.get(obj.name);
    Object.assign(mapObject.data, obj.data);
    map.set(obj.name ,mapObject); 
  } else{
    map.set(obj.name, Object.assign({},obj));
  }
});
let result = Array.from(map.values());

console.log(result);

Ross Mackay · Accepted Answer · 2018-08-14 14:35:33Z

0

Here's a ramda example too for reference:

pipe(
  groupBy(prop('name')),
  map(pipe(pluck('data'), mergeAll)),
)

answered Aug 14, 2018 at 14:35

Ross Mackay

9724 silver badges11 bronze badges

Collectives™ on Stack Overflow

Flatten an array object to single object - Javascript

5 Answers 5

4 Comments

1 Comment

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related