Retrieve data using the designated key and convert it into JSON format

Question

Retrieve data using the designated key and convert it into JSON format

If I have the following JSON array:

[
    {"data":
        [
            {"W":1,"A1":"123"},
            {"W":1,"A1":"456"},
            {"W":2,"A1":"4578"},
            {"W":2,"A1":"2423"},
            {"W":2,"A1":"2432"},
            {"W":2,"A1":"24324"}
        ]
    }
]

What is the best way to transform it into the format below?

[
    {"1":[
        {"A1":"123"},
        {"A1":"456"}
    ]},
    {"2":[
        {"A1":"4578"},
        {"A1":"2423"},
        {"A1":"2432"},
        {"A1":"24324"}
    ]}
]

javascript json

Answer 1

Answer №1

If you want to tackle this task using pure JavaScript, the functional approach is definitely the way to go. It's sleeker, more elegant, and gets the job done faster. One technique you can employ is creating a key/value hashmap to manage your data effectively.

Two powerful methods that come in handy for this scenario are Array.prototype.reduce() and Array.prototype.concat().

// Combine reduce and concat to build an array
// Start by initializing the process with an empty object
var filter = [].concat.apply(array[0].data.reduce(function(hash, current) {
    // Check if the hashmap already has the current.W key
    return hash.hasOwnProperty(current.W) 
        // If yes, add the current object to the existing array under that key
        ? (hash[current.W].push({'A1': current.A1}), hash)
        // If not, create a new key-value pair with an array as the value
        : (hash[current.W] = [{'A1': current.A1}], hash);
}, {}));

console.log(filter);

Answer 2

If you want to tackle this task using pure JavaScript, the functional approach is definitely the way to go. It's sleeker, more elegant, and gets the job done faster. One technique you can employ is creating a key/value hashmap to manage your data effectively.

Two powerful methods that come in handy for this scenario are Array.prototype.reduce() and Array.prototype.concat().

// Combine reduce and concat to build an array
// Start by initializing the process with an empty object
var filter = [].concat.apply(array[0].data.reduce(function(hash, current) {
    // Check if the hashmap already has the current.W key
    return hash.hasOwnProperty(current.W) 
        // If yes, add the current object to the existing array under that key
        ? (hash[current.W].push({'A1': current.A1}), hash)
        // If not, create a new key-value pair with an array as the value
        : (hash[current.W] = [{'A1': current.A1}], hash);
}, {}));

console.log(filter);

Answer 3

Answer №2

If you're looking to group elements in a collection, consider using underscore:

GroupBy Function in Underscore.js

The groupBy function in Underscore.js allows you to split a collection into sets based on the result of applying an iteratee function to each element. You can provide either a function or a property name as the iteratee.

Example using _.groupBy:
_.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); });
=> {1: [1.3], 2: [2.1, 2.4]}

Another example:
_.groupBy(['one', 'two', 'three'], 'length');
=> {3: ["one", "two"], 5: ["three"]}

Answer 4

If you're looking to group elements in a collection, consider using underscore:

GroupBy Function in Underscore.js

The groupBy function in Underscore.js allows you to split a collection into sets based on the result of applying an iteratee function to each element. You can provide either a function or a property name as the iteratee.

Example using _.groupBy:
_.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); });
=> {1: [1.3], 2: [2.1, 2.4]}

Another example:
_.groupBy(['one', 'two', 'three'], 'length');
=> {3: ["one", "two"], 5: ["three"]}

Answer 5

Answer №3

To simplify the process, consider doing some reduction:

var obj = [{
        "data": [
            { "W": 1, "A1": "123" },
            { "W": 1, "A1": "456" },
            { "W": 2, "A1": "4578" },
            { "W": 2, "A1": "2423" },
            { "W": 2, "A1": "2432" },
            { "W": 2, "A1": "24324" }
        ]
    }],
    grouped = obj[0].data.reduce(function (r, a) {
        r[a.W] = r[a.W] || [];
        r[a.W].push({ A1: a.A1 });
        return r;
    }, {}),
    groupedAsDesired = Object.keys(grouped).reduce(function (r, a) {
        var o = {};
        o[a] = grouped[a];
        r.push(o);
        return r;
    }, []);

document.write('<pre>grouped: ' + JSON.stringify(grouped, 0, 4) + '</pre>');
document.write('<pre>groupedAsDesired: ' + JSON.stringify(groupedAsDesired, 0, 4) + '</pre>');

A helpful tip is to avoid wrapping objects with different properties in arrays for your desired result. Compare the results of grouped and groupedAsDesired in the output window.

Answer 6

To simplify the process, consider doing some reduction:

var obj = [{
        "data": [
            { "W": 1, "A1": "123" },
            { "W": 1, "A1": "456" },
            { "W": 2, "A1": "4578" },
            { "W": 2, "A1": "2423" },
            { "W": 2, "A1": "2432" },
            { "W": 2, "A1": "24324" }
        ]
    }],
    grouped = obj[0].data.reduce(function (r, a) {
        r[a.W] = r[a.W] || [];
        r[a.W].push({ A1: a.A1 });
        return r;
    }, {}),
    groupedAsDesired = Object.keys(grouped).reduce(function (r, a) {
        var o = {};
        o[a] = grouped[a];
        r.push(o);
        return r;
    }, []);

document.write('<pre>grouped: ' + JSON.stringify(grouped, 0, 4) + '</pre>');
document.write('<pre>groupedAsDesired: ' + JSON.stringify(groupedAsDesired, 0, 4) + '</pre>');

A helpful tip is to avoid wrapping objects with different properties in arrays for your desired result. Compare the results of grouped and groupedAsDesired in the output window.

Retrieve data using the designated key and convert it into JSON format

Answer №1

Answer №2

GroupBy Function in Underscore.js

Answer №3

Similar questions

Ways to verify every entered word without having to click a button

Create a line chart with multiple lines using data retrieved from either JSON or MySQL

Unable to retrieve the properties of a JavaScript object

The error message "window is not defined" is commonly encountered in Next

Google Calendar Data in JSON Format

Updating an array using `setState` does not result in the array being updated

Cleaning user Input in Rails 4

Showing every piece of information line by line while uploading an AJAX CSV file

Troubleshooting issues with sending POST requests in node.js

Performing XMLHttpRequests and ajax requests inside a foreach loop

Is there a feature in JavaScript that allows for the creation of URLs?

What are the steps for creating a dropdown menu that allows for easy selection of the correct item

Chip input component in React

Tips for avoiding cursor sticking in css rotate transform in firefox?

how to transfer data from backend servlet to frontend javascript

Utilizing a PHP Class object in Javascript by accessing its properties within a Javascript function

What is the best way to implement debouncing for an editor value that is controlled by the parent component?

Is there a way to prevent the jsonPayload in stackdriver from automatically converting to a struct format?

Transforming JSON-like structure into JSON format

Encountering a DataCorrupted error while decoding a JSON file