Shifting the contents of a JavaScript array

Question

Shifting the contents of a JavaScript array

My dataset consists of values categorized by different sections as shown below:

var data = [
{'name': 'Test 1',
'values': {
'50':0,
'51':10,
'52':0,
'53':10,
'54':60,
'55':999
}},
{'name': 'Test 2',
'values': {
'50':33,
'51':3,
'52':333,
'53':3,
'54':3,
'55':3333
}},
{'name': 'Test 3',
'values': {
'50':55,
'51':66,
'52':77,
'53':88,
'54':99,
'55':100
}}];

To transform this into a new array with each value separated, I would expect the result to look like this:

var result = [
{'value':50, 'Test 1':0, 'Test 2':33, 'Test 3': 55},
{'value':51, 'Test 1':10, 'Test 2':3, 'Test 3': 66},
{'value':52, 'Test 1':0, 'Test 2':333, 'Test 3': 77},
{'value':53, 'Test 1':10, 'Test 2':3, 'Test 3': 88},
{'value':54, 'Test 1':60, 'Test 2':3, 'Test 3': 99},
{'value':55, 'Test 1':999, 'Test 2':3333, 'Test 3': 100}
]

How can I iterate through the existing data array to create this new format?

javascript arrays

Answer 1

Answer №1

One approach is to create an object that collects keys with their corresponding values and then extract the result set from this object.

var data = [{ name: 'Test 1', values: { 50: 0, 51: 10, 52: 0, 53: 10, 54: 60, 55: 999 } }, { name: 'Test 2', values: { 50: 33, 51: 3, 52: 333, 53: 3, 54: 3, 55: 3333 } }, { name: 'Test 3', values: { 50: 55, 51: 66, 52: 77, 53: 88, 54: 99, 55: 100 } }]
    result = Object.values(data.reduce((r, { name, values }) => {
        Object.entries(values).forEach(([k, v]) => {
            r[k] = r[k] || { value: +k };
            r[k][name] = v;
        });
        return r;
    }, {}));

console.log(result);

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

Answer 2

One approach is to create an object that collects keys with their corresponding values and then extract the result set from this object.

var data = [{ name: 'Test 1', values: { 50: 0, 51: 10, 52: 0, 53: 10, 54: 60, 55: 999 } }, { name: 'Test 2', values: { 50: 33, 51: 3, 52: 333, 53: 3, 54: 3, 55: 3333 } }, { name: 'Test 3', values: { 50: 55, 51: 66, 52: 77, 53: 88, 54: 99, 55: 100 } }]
    result = Object.values(data.reduce((r, { name, values }) => {
        Object.entries(values).forEach(([k, v]) => {
            r[k] = r[k] || { value: +k };
            r[k][name] = v;
        });
        return r;
    }, {}));

console.log(result);

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

Answer 3

Answer №2

If you find yourself dealing with messy data, this method provides a reliable and fault-tolerant approach to handling it efficiently.

var data = [
{'name': 'Test 1',
'values': {
'50':0,
'51':10,
'52':0,
'53':10,
'54':60,
'55':999
}},
{'name': 'Test 2',
'values': {
'50':33,
'51':3,
'52':333,
'53':3,
'54':3,
'55':3333
}},
{'name': 'Test 3',
'values': {
'50':55,
'51':66,
'52':77,
'53':88,
'54':99,
'55':100
}}];

var piv_data = [];

for(var i = 0; i < data.length; i++)
{
    var name = data[i].name;
    for(var value in data[i].values)
    {
        var index = -1;
        for(var x=0; x < piv_data.length; x++)
        {
            if(piv_data[x].value == value)
            {
                index = x;
                break; 
            }
        }
        if(index == -1)
        {
            piv_data.push({ 'value': value })
            index = piv_data.length -1;
        }
        piv_data[index][name] = data[i].values[value]
    }
}

console.log(piv_data)

Answer 4

If you find yourself dealing with messy data, this method provides a reliable and fault-tolerant approach to handling it efficiently.

var data = [
{'name': 'Test 1',
'values': {
'50':0,
'51':10,
'52':0,
'53':10,
'54':60,
'55':999
}},
{'name': 'Test 2',
'values': {
'50':33,
'51':3,
'52':333,
'53':3,
'54':3,
'55':3333
}},
{'name': 'Test 3',
'values': {
'50':55,
'51':66,
'52':77,
'53':88,
'54':99,
'55':100
}}];

var piv_data = [];

for(var i = 0; i < data.length; i++)
{
    var name = data[i].name;
    for(var value in data[i].values)
    {
        var index = -1;
        for(var x=0; x < piv_data.length; x++)
        {
            if(piv_data[x].value == value)
            {
                index = x;
                break; 
            }
        }
        if(index == -1)
        {
            piv_data.push({ 'value': value })
            index = piv_data.length -1;
        }
        piv_data[index][name] = data[i].values[value]
    }
}

console.log(piv_data)

Shifting the contents of a JavaScript array

Answer №1

Answer №2

Similar questions

Looking to dynamically generate HTML tags using jQuery and JSON?

The XMLHttpRequest() function throws NS_ERROR_FAILURE when sending requests to localhost using either an absolute or relative path

The mysterious plugin "transform-runtime" has been detected in the ".babelrc" file located in "UsersPhpstormProjectseasy-essay"

Leveraging Angular's capability to import files directly from the assets

Experiencing difficulties with JWT implementation and seeking to transmit the JWT token to additional APIs

Issue with connect() method in React-Redux resulting in a TypeError

Pass various arrays from JavaScript interface to C# MVC method

How does the next() function work within the context of express.js middleware?

Tips on adding up the values of fields in arrays in mongoose

After implementing the msw-storybook-addon, I encountered an error stating "Unexpected character '#' in node_modules/../Emitter.js."

I am encountering a 302 error when attempting to sideload images on Imgur using the API

Can you please explain the process of retrieving the value of an item from a drop-down menu using JavaScript?

Retrieve the key from the array if the specified value is found in PHP

Transforming a Nestjs string object into JSON data

"Troubleshooting: Issues with message passing between popup.html and content.js in Chrome Extension

Retrieve all nested content files and organize them by their respective directories in Nuxt content

"jQuery's .each() method is only iterating through the last element in

Managing numerous API requests in React Native

Retrieve database SQL information using JavaScript to display data

I wonder where this design is originating from