How to transform source array and merge inner object property values?

Question

folks, I faced with a problem. I have a huge array with objects. And I need to transform it into a specific array with merging inner properties.

I have a source array

const srcArr = [
  {
    "id": 2142,
    "time": 1579111185330,
    "rpm": 0,
    "speed": 0,
  },
  {
    "id": 435345,
    "time": 1579111186340,
    "rpm": 1,
    "speed": 2,
  },
  {
    "id": 34636,
    "time": 1579111187340,
    "rpm": 2,
    "speed": 4,
  }];

And I need on output array like this, excluding key 'id'.

const outArr = [
  {
    title: "time",
    data: [1579111185330, 1579111186340, 1579111187340]
  },
  {
   title: "rpm",
   data: [0, 1, 2],
  },
  {
   title: "speed",
   data: [0, 2, 4]
  }
]

What should I use? Reduce? map?

are there only those 3 keys or there could be more than those? — Alberto
– Alberto, Commented Jul 31, 2020 at 10:33
no, actually there are about 10 keys and one of them is redundant — David
– David, Commented Jul 31, 2020 at 10:48
so none of the answers are what you are looking for? can you please post the real input? — Alberto
– Alberto, Commented Jul 31, 2020 at 10:49
there is no need to provide more input, you just need a function which supports any number of keys — Ziarno
– Ziarno, Commented Jul 31, 2020 at 10:54
I edited my question a little. So now you see there is a kye that should not past in output array. But how many properties I thin it really doesn't matter. Nikita Madeev's answer is most close and almost exactly what I looked for. — David
– David, Commented Jul 31, 2020 at 10:56

Nikita Madeev · Accepted Answer · 2020-07-31 11:06:18Z

2

An implementation that works with any number of keys

const srcArr = [
    { time: 1579111185330, rpm: 0, speed: 0, other: 'test1' },
    { time: 1579111186340, rpm: 1, speed: 2, other: 'test2' },
    { time: 1579111187340, rpm: 2, speed: 4, other: 'test3' },
];

const result = srcArr.reduce(
    (acc, obj) =>
        Object.entries(obj).reduce(
            (a, [key, val]) => ({
                ...a,
                [key]: a[key] ? [...a[key], val] : [val],
            }),
            acc,
        ),
    {},
);

console.log(Object.entries(result).map(([title, data]) => ({ title, data })));

With exclude keys:

const srcArr = [
    { id: 1, time: 1579111185330, rpm: 0, speed: 0, other: 'test1' },
    { id: 2, time: 1579111186340, rpm: 1, speed: 2, other: 'test2' },
    { id: 3, time: 1579111187340, rpm: 2, speed: 4, other: 'test3' },
];
const excludeKeys = ['id', 'other'];

const result = srcArr.reduce(
    (acc, obj) =>
        Object.entries(obj)
            .filter(e => !excludeKeys.includes(e[0]))
            .reduce(
                (a, [key, val]) => ({
                    ...a,
                    [key]: a[key] ? [...a[key], val] : [val],
                }),
                acc,
            ),
    {},
);

console.log(Object.entries(result).map(([title, data]) => ({ title, data })));

edited Jul 31, 2020 at 11:06

answered Jul 31, 2020 at 10:39

Nikita Madeev

4,49012 silver badges23 bronze badges

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

1 Comment

David Over a year ago

Thank you, Nikita, but could I ask you please to edit your answer, for adding a check on key fields? for example, I want to check if key !== 'id'.

adiga · Accepted Answer · 2020-07-31 11:11:33Z

1

You could loop through the array and inside loop through the keys of the object. Use a group object to map each key with the object needed in the output

const srcArr=[{id:2142,time:1579111185330,rpm:0,speed:0,},{id:435345,time:1579111186340,rpm:1,speed:2,},{id:34636,time:1579111187340,rpm:2,speed:4,}];
const group = {}

for(const { id, ...rest } of srcArr) {
  for(const key in rest) {
    group[key] = group[key] || { title: key, data: [] };
    group[key].data.push(rest[key]);
  }
}

console.log(Object.values(group))

answered Jul 31, 2020 at 11:11

adiga

35.4k9 gold badges66 silver badges88 bronze badges

Comments

AlexAV-dev · Accepted Answer · 2020-07-31 10:37:40Z

0

You can use reduce with custom initialValue as

[
  {
    title: 'time',
    data: []
  }, {
    title: 'rpm',
    data: []
  }, {
    title: 'speed',
    data: []
  }
]

const srcArr = [
  {
    "time": 1579111185330,
    "rpm": 0,
    "speed": 0,
  },
  {
    "time": 1579111186340,
    "rpm": 1,
    "speed": 2,
  },
  {
    "time": 1579111187340,
    "rpm": 2,
    "speed": 4,
  }];

const result = srcArr.reduce((acc, rec) => {
  return [ 
    ...acc, 
      acc[0].data.push(rec.time),
      acc[1].data.push(rec.rpm),
      acc[2].data.push(rec.speed),
  ]
},[
  {
    title: 'time',
    data: []
  }, {
    title: 'rpm',
    data: []
  }, {
    title: 'speed',
    data: []
  }]).slice(0, 3)

console.log(JSON.stringify(result))

answered Jul 31, 2020 at 10:37

AlexAV-dev

1,1756 silver badges14 bronze badges

1 Comment

Ziarno Over a year ago

it is bad to assume there are only 3 keys. Even if that was true, better to create a functionality that supports more keys in case this changed in the future.

Ziarno · Accepted Answer · 2020-07-31 10:59:32Z

function transformData(array) {
  const destinationObject = {};

  function mergeObjects(destination, source) {
    for (let key in source) {
      const value = source[key];
      if (Array.isArray(destination[key])) {
        destination[key].push(value);
      } else {
        destination[key] = [value];
      }
    }
  }

  function makeTitledArrayFromObject(object) {
    const result = [];
    for (let key in object) {
      result.push({
        title: key,
        data: object[key]
      });
    }
    return result;
  }
  
   array.forEach(mergeObjects.bind(null, destinationObject));
   return makeTitledArrayFromObject(destinationObject);
}

const srcArr = [{ "time": 1579111185330,"rpm": 0,"speed": 0,},{"time":1579111186340,"rpm": 1,"speed": 2,},{"time": 1579111187340,"rpm": 2,"speed": 4}];

const result = transformData(srcArr);
console.log(result);

Collectives™ on Stack Overflow

How to transform source array and merge inner object property values?

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related