Tips on organizing JSON data with JavaScript

Question

Tips on organizing JSON data with JavaScript

After receiving my $http response, the data is presented in the format below:

$scope.rooms = {  
    '2B' : [    
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ebd9a9c6d8d9d8ab868ec5888486">[email protected]</a>","RoomName":"2B-323"},    
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccfe8ee1fdfeff8ca1a9e2afa3a1">[email protected]</a>","RoomName":"2B-123"}     
    ],   
    '5A' : [  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86b3c7abb5b4b5c6ebe3a8e5e9eb">[email protected]</a>","RoomName":"5A-323"},   
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="754034584447463518105b161a18">[email protected]</a>","RoomName":"5A-123"},  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1c4b0dcc5c3c2b19c94df929e9c">[email protected]</a>","RoomName":"5A-423"}  
    ],  
    '1A' : [  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9faedeb2acadacdff2fab1fcf0f2">[email protected]</a>","RoomName":"1A-323"},  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbea9af6eae9e89bb6bef5b8b4b6">[email protected]</a>","RoomName":"1A-123"},  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a796e68a939594e7cac289c4c8ca">[email protected]</a>","RoomName":"1A-423"}  
    ]  
}

To arrange this data in a specific order as shown below:

$scope.rooms = {  
    '1A' : [  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d3c4c203c3f3e4d6068236e6260">[email protected]</a>","RoomName":"1A-123"},  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a7b0b677978790a272f64292527">[email protected]</a>","RoomName":"1A-323"},  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deef9ff3eaeced9eb3bbf0bdb1b3">[email protected]</a>","RoomName":"1A-423"}  
    ],  
    '2B' : [  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ab99e9869a9998ebc6ce85c8c4c6">[email protected]</a>","RoomName":"2B-123"},  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8fa8ae5fbfafb88a5ade6aba7a5">[email protected]</a>","RoomName":"2B-323"}       
    ],  
    '5A' : [  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a194e08c909392e1ccc48fc2cecc">[email protected]</a>","RoomName":"5A-123"},  
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aa9feb87999899eac7cf84c9c5c7">[email protected]</a>","RoomName":"5A-323"},        
        {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="380d79150c0a0b78555d165b5755">[email protected]</a>","RoomName":"5A-423"}              
    ],  
}

I am looking for guidance on how to implement this sorting using JavaScript.

javascript arrays json

Answer 1

Answer №1

It appears that you have rearranged the keys within the object. Keep in mind that object key-values cannot be sorted; they need to be placed in an array for sorting to take place. To sort the arrays that serve as values of those keys, you can utilize the reduce method to create a new object without mutating the original rooms object.

const result = Object.keys(rooms).reduce((obj, roomKey) => {
  obj[roomKey] = rooms[roomKey].slice().sort((a, b) => a.RoomName > b.RoomName);
  return obj;
}, {});

See it in action here: http://jsbin.com/paqavaxako/edit?html,js,console

Answer 2

It appears that you have rearranged the keys within the object. Keep in mind that object key-values cannot be sorted; they need to be placed in an array for sorting to take place. To sort the arrays that serve as values of those keys, you can utilize the reduce method to create a new object without mutating the original rooms object.

const result = Object.keys(rooms).reduce((obj, roomKey) => {
  obj[roomKey] = rooms[roomKey].slice().sort((a, b) => a.RoomName > b.RoomName);
  return obj;
}, {});

See it in action here: http://jsbin.com/paqavaxako/edit?html,js,console

Answer 3

Answer №2

Is this what you're looking for? Use the delete function to reassign values to the object instead. Here is how you can use it:

sort(rooms, by("RoomName", "RoomEmailId"))

Custom Code

function by(columns) {
    columns = typeof columns == "string" ? columns.split(",") : columns;

    function compare(a, b) {
        return a > b ? 1 : a < b ? -1 : 0;
    }

    return function (a, b) {
        for (var i in columns) {
            var p = columns[i];
            var it = compare(a[p], b[p]);
            if (it) {
                return it;
            }
        }
        return 0;
    }
}

function sort(o, comparator) {
    return Object.keys(o).sort().reduce(function (o, key) {
        var it = o[key];
        delete o[key];
        o[key] = it.sort ? it.sort(comparator) : it;
        return o;
    }, o);
}

Testing Functions

test("Sorting Keys", () => {
    let o = {b: 2, a: 1};

    expect(Object.keys(o)).toEqual(["b", "a"]);
    expect(sort(o, null)).toEqual({a: 1, b: 2});
    expect(Object.keys(o)).toEqual(["a", "b"]);
});

test("Sorting Values", () => {
    let o = {b: [{value: 2}, {value: 1}], a: [{value: 4}, {value: 3}]};

    expect(Object.keys(o)).toEqual(["b", "a"]);
    expect(sort(o, by("value"))).toEqual({b: [{value: 1}, {value: 2}], a: [{value: 3}, {value: 4}]});
    expect(Object.keys(o)).toEqual(["a", "b"]);
});

Demonstration

var rooms = {  
    '2B' : [    
        {"RoomEmailId":"example1","RoomName":"2B-323"},    
        {"RoomEmailId":"example2","RoomName":"2B-123"}     
    ],   
    '5A' : [  
        {"RoomEmailId":"example3","RoomName":"5A-323"},   
        {"RoomEmailId":"example4","RoomName":"5A-123"},  
        {"RoomEmailId":"example5","RoomName":"5A-423"}  
    ],  
    '1A' : [  
        {"RoomEmailId":"example6","RoomName":"1A-323"},  
        {"RoomEmailId":"example7","RoomName":"1A-123"},  
        {"RoomEmailId":"example8","RoomName":"1A-423"}  
    ]  
};
function by(columns) {
    columns = typeof columns == "string" ? columns.split(",") : columns;

    function compare(a, b) {
        return a > b ? 1 : a < b ? -1 : 0;
    }

    return function (a, b) {
        for (var i in columns) {
            var p = columns[i];
            var it = compare(a[p], b[p]);
            if (it) {
                return it;
            }
        }
        return 0;
    }
}

function sort(o, comparator) {
    return Object.keys(o).sort().reduce(function (o, key) {
        var it = o[key];
        delete o[key];
        o[key] = it.sort ? it.sort(comparator) : it;
        return o;
    }, o);
}
console.log("Unsorted Rooms:", rooms);
console.log("Sorted Rooms:", sort(rooms, by("RoomName", "RoomEmailId")));

Answer 4

Is this what you're looking for? Use the delete function to reassign values to the object instead. Here is how you can use it:

sort(rooms, by("RoomName", "RoomEmailId"))

Custom Code

function by(columns) {
    columns = typeof columns == "string" ? columns.split(",") : columns;

    function compare(a, b) {
        return a > b ? 1 : a < b ? -1 : 0;
    }

    return function (a, b) {
        for (var i in columns) {
            var p = columns[i];
            var it = compare(a[p], b[p]);
            if (it) {
                return it;
            }
        }
        return 0;
    }
}

function sort(o, comparator) {
    return Object.keys(o).sort().reduce(function (o, key) {
        var it = o[key];
        delete o[key];
        o[key] = it.sort ? it.sort(comparator) : it;
        return o;
    }, o);
}

Testing Functions

test("Sorting Keys", () => {
    let o = {b: 2, a: 1};

    expect(Object.keys(o)).toEqual(["b", "a"]);
    expect(sort(o, null)).toEqual({a: 1, b: 2});
    expect(Object.keys(o)).toEqual(["a", "b"]);
});

test("Sorting Values", () => {
    let o = {b: [{value: 2}, {value: 1}], a: [{value: 4}, {value: 3}]};

    expect(Object.keys(o)).toEqual(["b", "a"]);
    expect(sort(o, by("value"))).toEqual({b: [{value: 1}, {value: 2}], a: [{value: 3}, {value: 4}]});
    expect(Object.keys(o)).toEqual(["a", "b"]);
});

Demonstration

var rooms = {  
    '2B' : [    
        {"RoomEmailId":"example1","RoomName":"2B-323"},    
        {"RoomEmailId":"example2","RoomName":"2B-123"}     
    ],   
    '5A' : [  
        {"RoomEmailId":"example3","RoomName":"5A-323"},   
        {"RoomEmailId":"example4","RoomName":"5A-123"},  
        {"RoomEmailId":"example5","RoomName":"5A-423"}  
    ],  
    '1A' : [  
        {"RoomEmailId":"example6","RoomName":"1A-323"},  
        {"RoomEmailId":"example7","RoomName":"1A-123"},  
        {"RoomEmailId":"example8","RoomName":"1A-423"}  
    ]  
};
function by(columns) {
    columns = typeof columns == "string" ? columns.split(",") : columns;

    function compare(a, b) {
        return a > b ? 1 : a < b ? -1 : 0;
    }

    return function (a, b) {
        for (var i in columns) {
            var p = columns[i];
            var it = compare(a[p], b[p]);
            if (it) {
                return it;
            }
        }
        return 0;
    }
}

function sort(o, comparator) {
    return Object.keys(o).sort().reduce(function (o, key) {
        var it = o[key];
        delete o[key];
        o[key] = it.sort ? it.sort(comparator) : it;
        return o;
    }, o);
}
console.log("Unsorted Rooms:", rooms);
console.log("Sorted Rooms:", sort(rooms, by("RoomName", "RoomEmailId")));

Tips on organizing JSON data with JavaScript

Answer №1

Answer №2

Custom Code

Testing Functions

Demonstration

Similar questions

How can I retrieve the Azure subscription IDs of the currently logged in user using @azure/msal-angular?

How can you transform the outcome of a TYPO3 repository search into a JSON format?

Dealing with JSON post requests in Node.js using Express 4

What is the best way to retrieve a particular variable from an ng-repeat loop?

What is the best way to trigger a function in Vue.js when a click event occurs on Google Maps?

Is it possible to switch the background image when hovering?

tips for building angularjs widgets with limited scope

The term 'ItemIsLoading' is typically used as a type, however, it is being incorrectly used as a value in this context

Techniques for accessing and modifying JSON data with AngularJs

What is the method to make Celery return a JSON object instead of bytea?

Changes made to one order's information can impact the information of another order

Choose a Date from the Calendar and Modify the Link Text

Nodejs is utilized to alter the data format as it is transferred from the client to the server

Having trouble getting the json2html Python library to function correctly

Modify CSS class if the window size is smaller than specified value

Exploring how arrays are managed in Excel with the SUMPRODUCT() function

What steps can be taken to identify the referrer of external links when the target attribute is set to "_blank"?

"Develop an interactive feature with jQuery that dynamically generates and removes fields according to the option selected from a

Dealing with Jquery AJAX requests to NLB and navigating the challenges of cross-domain scripting restrictions

Tips for acquiring offspring who are exclusively not descendants of a particular node