What is the best way to merge values in an array based on their keys?

Question

What is the best way to merge values in an array based on their keys?

Here is a sample of the data I have:

data = [
  [
    {"name":"cpumhz","data":[[1433856538,0],[1433856598,0]]},
    {"name":"mem","data":[[1433856538,13660],[1433856598,13660]]}
  ],
  [
    {"name":"cpumhz","data":[[1433856538,0],[1433856598,0]]},
    {"name":"mem","data":[[1433856538,13660],[1433856598,13660]]}
  ],
  [
    {"name":"cpumhz","data":[[1433856538,0],[1433856598,0]]},
    {"name":"mem","data":[[1433856538,13660],[1433856598,13660]]}
  ]
];

My question is how to utilize map to merge the arrays so that the data values are combined:

For example:

data = [
  [
    {"name":"cpumhz","data":[[1433856538,0],[1433856598,0],[1433856538,0],[1433856598,0], [1433856538,0],[1433856598,0]]},
    {"name":"mem","data":[[1433856538,13660],[1433856598,13660], [1433856538,13660],[1433856598,13660], [1433856538,13660],[1433856598,13660]]}
  ]
];

I have been attempting to achieve this manually as follows:

res = []

cpudata = _.flatten([data[0][0].data, data[1][0].data, data[2][0].data])
res.push({name: 'cpumhz', data: cpudata})

memdata = _.flatten([data[0][1].data, data[1][1].data, data[2][1].data])
res.push({name: 'mem', data: memdata})

Link to the corresponding exercise: http://jsbin.com/bekodirili/7/edit

javascript angularjs underscore.js lodash

Answer 1

Answer №1

Consider utilizing the reduce method. Other libraries like Underscore or lodash offer similar functionalities.

The concept is to streamline the data into a single array containing 2 values. The following snippet demonstrates how to achieve this:

var reducedData = data.reduce(function(prev, cur) {
    prev.forEach(function(value, index) {
        value.data = value.data.concat(cur[index].data);
    });

    return prev;
});

By iterating through each value in data and reducing it, you combine the previous sub-data with the current sub-data, resulting in a new value.

Answer 2

Consider utilizing the reduce method. Other libraries like Underscore or lodash offer similar functionalities.

The concept is to streamline the data into a single array containing 2 values. The following snippet demonstrates how to achieve this:

var reducedData = data.reduce(function(prev, cur) {
    prev.forEach(function(value, index) {
        value.data = value.data.concat(cur[index].data);
    });

    return prev;
});

By iterating through each value in data and reducing it, you combine the previous sub-data with the current sub-data, resulting in a new value.

Answer 3

Answer №2

Using lodash library, you have the ability to accomplish the following:

_(data)
    .flatten()
    .groupBy('name')
    .reduce(function(result, item, key) {
        return result.concat([{
            name: key,
            data: _.flatten(_.pluck(item, 'data'))
        }]);
    }, []);

By utilizing the flatten() function, you can transform the data into an array and then group it based on the value under the key name using the groupBy() method. This process results in an object with properties named cpuhz and mem.

Finally, with the help of the reduce() function, it becomes straightforward to convert the object into the desired array format.

Answer 4

Using lodash library, you have the ability to accomplish the following:

_(data)
    .flatten()
    .groupBy('name')
    .reduce(function(result, item, key) {
        return result.concat([{
            name: key,
            data: _.flatten(_.pluck(item, 'data'))
        }]);
    }, []);

By utilizing the flatten() function, you can transform the data into an array and then group it based on the value under the key name using the groupBy() method. This process results in an object with properties named cpuhz and mem.

Finally, with the help of the reduce() function, it becomes straightforward to convert the object into the desired array format.

What is the best way to merge values in an array based on their keys?

Answer №1

Answer №2

Similar questions

Every time I try to run npm start on my React app, I keep receiving the error message "? Something is already running on port 3000"

What is the best way to manage files in Vue.js?

Retrieve information from the script tag

What sets Vue.js apart, class and staticClass - is there a distinction?

Adding EventListeners for Click Handling: A Step-by-Step Guide

A collection of functions embedded within a JSON data structure

Is my input file in Javascript valid and does it exist? Here's how to check

Combining duplicate key-value pairs in a JSON object into an array using JavaScript

Create a dynamic progress bar that integrates seamlessly with the ajaxupload functionality for a smoother video uploading

Extremely sluggish change identification in combination Angular application

Discovering a way to retrieve objects from an array of objects with matching IDs

How can I dynamically assign @ViewChild('anchor_name') to a newly updated anchor element in Angular 2+?

NodeJS paired with AngularJS

Ways to enable an Angular 5 web application to launch in multiple tabs within a single browser

Simplify a JSON array in JavaScript by removing nested layers

Can you provide me with some insight on the process of iterating through an object utilizing the

Discover the location following a designated distance along a direct path connecting two points in the Google Maps API

Angular's separate scope variables allow for isolated data manipulation within individual components

Efficient method for handling numerous AJAX requests

Is the callback for a request always invoked?