Transform a JavaScript object array into a collection of individual values

Question

Transform a JavaScript object array into a collection of individual values

Given a list of objects structured like this, I am looking to transform it into a list of values based on their corresponding IDs.

Original = [
    {id: 1, value: 12.2494, time: "00:00:00.14"},
    {id: 1, value: 4.5141, time: "00:00:01.138"},
    {id: 1, value: 2.85930, time: "00:00:02.138"},
    {id: 1, value: 1.0364, time: "00:00:03.146"},
    {id: 2, value: 4.3510, time: "00:09:15.157"},
    {id: 2, value: 3.90, time: "00:09:16.115"},
    {id: 2, value: 3.544, time: "00:09:17.116"},
    {id: 2, value: 3.247, time: "00:09:18.157"}
]

Desired outcome

data[1]={value:[12.494, 4.5141...],time: ["00:00:00.14","00:00:01.138"]...} 
data[2]={value:[4.3510, 3.90...],time: ["00:09:15.157","00:09:16.115"]...}

In attempting this transformation, I encountered an issue where only one value was being returned:

var data= {};
original.forEach(function(item) {
    var id = item.id;
    data[id] = {
        value:[],
        time:[]
    }
    data[id].value.push(item['value']);
    data[id].time.push(item['time']);
})

javascript

Answer 1

Answer №1

To achieve this functionality, you can utilize the reduce function available in Arrays.

Firstly, you need to check the current id within the accumulator;

If the id already exists, push the values and times to the stored arrays.

Otherwise, create a template object and populate it with the values and times.

var Original=[{id: 1, value: 12.2494,  time: "00:00:00.14"},{id: 1, value: 4.5141, time: "00:00:01.138"},{id: 1, value: 2.85930,  time: "00:00:02.138"},{id: 1, value: 1.0364,  time: "00:00:03.146"},{id: 2, value: 4.3510,  time: "00:09:15.157"},{id: 2, value: 3.90, time: "00:09:16.115"},{id: 2, value: 3.544, time: "00:09:17.116"},{id: 2, value: 3.247,  time: "00:09:18.157"}];

var data = Original.reduce((a, c) => {
  var current = (a[c.id] || (a[c.id] = {value: [], time: []}));
  current.value.push(c.value);
  current.time.push(c.time);
  
  return a;
}, {});

console.log(data);

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

Answer 2

To achieve this functionality, you can utilize the reduce function available in Arrays.

Firstly, you need to check the current id within the accumulator;

If the id already exists, push the values and times to the stored arrays.

Otherwise, create a template object and populate it with the values and times.

var Original=[{id: 1, value: 12.2494,  time: "00:00:00.14"},{id: 1, value: 4.5141, time: "00:00:01.138"},{id: 1, value: 2.85930,  time: "00:00:02.138"},{id: 1, value: 1.0364,  time: "00:00:03.146"},{id: 2, value: 4.3510,  time: "00:09:15.157"},{id: 2, value: 3.90, time: "00:09:16.115"},{id: 2, value: 3.544, time: "00:09:17.116"},{id: 2, value: 3.247,  time: "00:09:18.157"}];

var data = Original.reduce((a, c) => {
  var current = (a[c.id] || (a[c.id] = {value: [], time: []}));
  current.value.push(c.value);
  current.time.push(c.time);
  
  return a;
}, {});

console.log(data);

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

Answer 3

Answer №2

If you prefer not to use the push method due to a personal preference, there's an alternative approach you can take:

const original = [
    {id: 1, value: 12.2494, time: "00:00:00.14"},
    {id: 1, value: 4.5141, time: "00:00:01.138"},
    {id: 1, value: 2.85930, time: "00:00:02.138"},
    {id: 1, value: 1.0364, time: "00:00:03.146"},
    {id: 2, value: 4.3510, time: "00:09:15.157"},
    {id: 2, value: 3.90, time: "00:09:16.115"},
    {id: 2, value: 3.544, time: "00:09:17.116"},
    {id: 2, value: 3.247, time: "00:09:18.157"}
]

const data = original.reduce((x, y) => x[y.id]
    ? Object.assign({}, x, {
        [y.id]: {
            value: x[y.id]
                .value
                .concat(y.value),
            time: x[y.id]
                .time
                .concat(y.time)
        }
    })
    : Object.assign({}, x, {
        [y.id]: {
            value: [y.value],
            time: [y.time]
        }
    }), {})

Alternatively, if your data contains gaps and you want to avoid adding undefined values, you can follow this procedure:

const unoriginal = [
    {id: 1, value: 12.2494, time: "00:00:00.14"},
    {id: 1, value: 4.5141, time: "00:00:01.138"},
    {id: 1, value: 2.85930, time: "00:00:02.138"},
    {id: 1, value: 1.0364},
    {id: 2, time: "00:09:15.157"},
    {id: 2, value: 3.90, time: "00:09:16.115"},
    {id: 2, value: 3.544, time: "00:09:17.116"},
    {id: 2, value: 3.247, time: "00:09:18.157"}
]

const otherData = unoriginal.reduce((x, y) => x.includes(y.id)
    ? x
    : x.concat(y.id), []).map(x => Object.assign({}, {
    [x]: {
        value: unoriginal
            .filter(y => x === y.id)
            .reduce((z, a) => a.value
                ? z.concat(a.value)
                : z, []),
        time: unoriginal
            .filter(y => x === y.id)
            .reduce((b, c) => c.time
                ? b.concat(c.time)
                : b, [])
    }
})).reduce((x, y) => Object.assign.apply(null, [x].concat(y)))

Answer 4

If you prefer not to use the push method due to a personal preference, there's an alternative approach you can take:

const original = [
    {id: 1, value: 12.2494, time: "00:00:00.14"},
    {id: 1, value: 4.5141, time: "00:00:01.138"},
    {id: 1, value: 2.85930, time: "00:00:02.138"},
    {id: 1, value: 1.0364, time: "00:00:03.146"},
    {id: 2, value: 4.3510, time: "00:09:15.157"},
    {id: 2, value: 3.90, time: "00:09:16.115"},
    {id: 2, value: 3.544, time: "00:09:17.116"},
    {id: 2, value: 3.247, time: "00:09:18.157"}
]

const data = original.reduce((x, y) => x[y.id]
    ? Object.assign({}, x, {
        [y.id]: {
            value: x[y.id]
                .value
                .concat(y.value),
            time: x[y.id]
                .time
                .concat(y.time)
        }
    })
    : Object.assign({}, x, {
        [y.id]: {
            value: [y.value],
            time: [y.time]
        }
    }), {})

Alternatively, if your data contains gaps and you want to avoid adding undefined values, you can follow this procedure:

const unoriginal = [
    {id: 1, value: 12.2494, time: "00:00:00.14"},
    {id: 1, value: 4.5141, time: "00:00:01.138"},
    {id: 1, value: 2.85930, time: "00:00:02.138"},
    {id: 1, value: 1.0364},
    {id: 2, time: "00:09:15.157"},
    {id: 2, value: 3.90, time: "00:09:16.115"},
    {id: 2, value: 3.544, time: "00:09:17.116"},
    {id: 2, value: 3.247, time: "00:09:18.157"}
]

const otherData = unoriginal.reduce((x, y) => x.includes(y.id)
    ? x
    : x.concat(y.id), []).map(x => Object.assign({}, {
    [x]: {
        value: unoriginal
            .filter(y => x === y.id)
            .reduce((z, a) => a.value
                ? z.concat(a.value)
                : z, []),
        time: unoriginal
            .filter(y => x === y.id)
            .reduce((b, c) => c.time
                ? b.concat(c.time)
                : b, [])
    }
})).reduce((x, y) => Object.assign.apply(null, [x].concat(y)))

Transform a JavaScript object array into a collection of individual values

Answer №1

Answer №2

Similar questions

Error: The function callback.apply is not a valid function (Node.js and Mongodb)

Is there a way to transfer PHP user information (session) to a Node.js server?

Utilizing Header and Footer Components in React JS

Seeking to duplicate script for a new table without making any changes to the original script

Modifying a Nested Component with react-icons

Troubleshooting Issue: Failure of Ajax Script to Display Saved Data in Edit Function

Two distinct controllers: concealing elements through the operation of one of them

Including an <a> tag within a JavaScript variable to utilize in an HTML statement

Ways to monitor and measure clicks effectively

Adjusting canvas size to match content dimensions

Integrating dual Google Maps onto a single HTML page

AngularJS ng-show will not function properly with newly added DOM elements

To prevent the animation from overflowing, set the parent element to have hidden overflow while still displaying the child element

Delete an <li> element upon clicking a span tag

Show informational pop-up when hovering over selected option

Could offering a Promise as a module's export be considered a legitimate approach for asynchronous initialization in a Node.js environment?

Determine whether a directive possesses a specific attribute

Is it possible in Angular to generate a module and component without including a CSS file in a single command?

Animated smooth updates in d3 line graphs are the key to creating dynamic and

Utilizing jQuery to Adjust Tab Transparency