Split an array in javascript based on the key for dataPoints

Question

I am working on a personal project and I want to display the graph for which i need to prepare the datapoints. The response I have is

{
  "size":[
    {
      "timestamp":"1641329889000",
      "size":12345,
      "fees":123456,
      "cost":168
    },
    {
      "timestamp":"1641387032",
      "size":456789,
      "fees":4567891,
      "cost":249
    },
    {
      "timestamp":"1641435786",
      "size":98765,
      "fees":987654,
      "cost":987
    },
  ]
}

I want the output should be like this

{
  "size":{
    "timestamp": ["1641329889000","1641387032","1641435786"],
    "size": [12345,456789,98765],
    "fees": [123456,4567891,987654],
    "cost": [168,249,987]
  }
}

Can anyone help me out with this

Ro Milton · Accepted Answer · 2022-01-06 06:08:49Z

1

Using .reduce(), you can use a generic function without any hardcoded datapoint names.

const data={size:[{timestamp:"1641329889000",size:12345,fees:123456,cost:168},{timestamp:"1641387032",size:456789,fees:4567891,cost:249},{timestamp:"1641435786",size:98765,fees:987654,cost:987}]};

const result = data.size.reduce((acc, item) => {
  const keys = Object.keys(item);
  return keys.reduce((keyAcc, key) => ({
    ...keyAcc,
    [key]: acc[key] ? [...acc[key], item[key]] : [item[key]]
  }), {});
}, [])

console.log({ size: result});

answered Jan 6, 2022 at 6:08

Ro Milton

2,54616 silver badges11 bronze badges

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

1 Comment

Peter Seliger Over a year ago

... upvote in order to make a statement on the accepted answer (generic approach vs hardcoded solution), ... despite me, due to personal and technical reasons, always arguing against the over/misuse of destructuring assignements and/or rest syntax just for the sake of avoiding (1) pushing into or concatenating an array and/or (2) assigning properties or objects and/or (3) a return within an arrow function.

Derek Lawrence · Accepted Answer · 2022-01-06 03:35:04Z

0

let obj = {
  "size":[
    {
      "timestamp":"1641329889000",
      "size":12345,
      "fees":123456,
      "cost":168
    },
    {
      "timestamp":"1641387032",
      "size":456789,
      "fees":4567891,
      "cost":249
    },
    {
      "timestamp":"1641435786",
      "size":98765,
      "fees":987654,
      "cost":987
    },
  ]
}

let timestamps = [];
let sizes = [];
let fees = [];
let costs = [];

obj.size.foreach( ( data ) => {
   timestamps.push( data.timestamp );
   sizes.push( data.size);
   fees.push( data.fees );
   costs.push( data.cost );
}

let size = { timestamp: timestamps, size : sizes, fees : fees, cost : costs }

let outputObj = { size : size };

console.log( outputObj );

answered Jan 6, 2022 at 3:35

Derek Lawrence

1,6282 gold badges17 silver badges38 bronze badges

Comments

Dae Hyeon Mun · Accepted Answer · 2022-01-06 03:36:45Z

0

Sure it's simple. :D

{
 "size":{
    "timestamp": size.map(item => item.timestamp),
    "size": size.map(item => item.size),
    "fees": size.map(item => item.fees),
    "cost": size.map(item => item.cost),
  }
}

answered Jan 6, 2022 at 3:36

Dae Hyeon Mun

5364 silver badges8 bronze badges

Comments

Peter Seliger · Accepted Answer · 2022-01-06 11:27:40Z

Merging array items into an object of grouped arrays is a classic reduce task which can be implemented in a generic way (agnostic to the underlaying data structure).

The following implementation in addition uses Object.entries in order to access each entry's key-value pair directly. It also utilizes the Logical nullish assignment / ??= operator in order to access or create/assign an array with one line of code.

function mergeAndCollectItemEntries(result, item) {
  Object
    // get an item's entry array.
    .entries(item)
    // for each key-value pair ...
    .forEach(([key, value]) => {

      // ... access and/or create a `key` specific array ...
      const groupList = (result[key] ??= []);

      // ... and push `value` into this array.
      groupList.push(value);
    });
  // return the programmatically aggregated merger result.
  return result
}

const sampleData = {
  "size": [{
    "timestamp": "1641329889000",
    "size": 12345,
    "fees": 123456,
    "cost": 168
  }, {
    "timestamp": "1641387032",
    "size": 456789,
    "fees": 4567891,
    "cost": 249
  }, {
    "timestamp": "1641435786",
    "size": 98765,
    "fees": 987654,
    "cost": 987
  }]
};

const mergedData = {
  size: sampleData.size.reduce(mergeAndCollectItemEntries, {})
};
console.log({
  sampleData,
  mergedData,
});

.as-console-wrapper { min-height: 100%!important; top: 0; }

The above reducer function could be implemented slightly different like shown with the next following example code ...

function mergeAndCollectItemEntries(result, item) {
  return Object
    .entries(item)
    .reduce((merger, [key, value]) => {

      (merger[key] ??= []).push(value);
      return merger;

    }, result);
}

const sampleData = {
  "size": [{
    "timestamp": "1641329889000",
    "size": 12345,
    "fees": 123456,
    "cost": 168
  }, {
    "timestamp": "1641387032",
    "size": 456789,
    "fees": 4567891,
    "cost": 249
  }, {
    "timestamp": "1641435786",
    "size": 98765,
    "fees": 987654,
    "cost": 987
  }]
};

const mergedData = {
  size: sampleData.size.reduce(mergeAndCollectItemEntries, {})
};
console.log({
  sampleData,
  mergedData,
});

.as-console-wrapper { min-height: 100%!important; top: 0; }

Collectives™ on Stack Overflow

Split an array in javascript based on the key for dataPoints

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related