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

Similar to LINQ's Enumerable.First(predicate) method but with a slightly different syntax, this

Issues with aligning center vertically and horizontally using flexbox are causing unexpected behavior

Replace the checkbox display heading with a text box in the designated area

Securing NextJS API Routes with API Key Authorization

Wcf Service does not define Angular JS methods

Verifying JSON array compatibility in PostgreSQL database

What's the best way to invoke a function from a different JS file or create a custom event in JQuery that includes a parameter as a data object?

Altering the color of a div based on a specified value condition

Using a Typescript variable prior to its assignment

Guidelines on integrating Admob into Ionic framework

Logging in using Selenium WebDriver in Java

The error message "TypeError: addNewUser is not a function in React.js onSubmit

Attempting to retrieve an image from the database using ajax within a PHP script

Using local storage with github sites can lead to some unexpected and peculiar behavior

I want to display events from my database table on their corresponding dates using JavaScript and jQuery. How can I achieve this?

Executing a JavaScript function within MainPage.xaml.cs codebehind file in a Windows application

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

Guide to generating a map of a Java POJO class or JSON String with basic data types

Using Swig template to evaluate a condition

Parsing JSON data into a Spark dataset that includes an inner array