How to Sort Dates, Numbers, Strings from the array of nested JSON objects in Javascript

Question

Hi get the JOSN data dynamically, based on the JOSN will render data in the table. In the JSON nested objects come and those names and properties keys also dynamically. I need to sort based on the table columns up and down button action ASC and DESC. On button action, I get the property names to sort, that properties key names will be placed inside the nested objects or it might be in the upper level. How to identify and sort dynamically number, strings or dates. Greate appreciate.

Below logic, I have added only work for the Single level JSON objects, not nested level objects.

dynamicJSON.sort((a, b) => {
          if (a[sortKeyname] < b[sortKeyname]) {
            return sortConfig.direction === 'ascending' ? -1 : 1;
          }
          if (a[sortKeyname] > b[sortKeyname]) {
            return sortConfig.direction === 'ascending' ? 1 : -1;
          }
          return 0;
        });

Below is the Sample Dynamic JSON data

From the below JSON, I have 7 columns, If I select the status column ASC/ DESC button, I get statusname property for the sort. it should traverse and sort nested JSON objects based on the key properties statusname. In case, if I select the Details column ASC/ DESC button,I get maindescription property for the sort. it should traverse and sort nested JSON objects based on the key properties maindescription.

[
   {
      "Date":"2020-10-16T04:15:58+00:00",
      "applicationName":"abc Portal",
      "status":{
         "statusname":"Success",
         "style":"success"
      },
      "details":{
         "maindescription":"welcome to the application",
         "maindescriptionSecn":"description 2",
         "maindescriptionSecnthrid":"description 3"
      },
      "location":"Sondekoppa, Karnataka, IN",
      "ipAddress":"157.49.147.190",
      "count":123
   },
   {
      "Date":"2020-10-16T04:15:56+00:00",
      "applicationName":"poratl 1",
      "status":{
         "statusname":"Success",
         "style":"success"
      },
      "details":{
         "maindescription":"welcome to the application",
         "maindescriptionSecn":"description 2",
         "maindescriptionSecnthrid":"description 3"
      },
      "location":"Sondekoppa, Karnataka, IN",
      "ipAddress":"157.49.147.190",
      "count":789
   },
   {
      "Date":"2020-10-16T04:21:41+00:00",
      "applicationName":"app Hub",
      "status":{
         "statusname":"Failure",
         "style":"error"
      },
      "details":{
         "maindescription":"welcome to the application",
         "maindescriptionSecn":"description 2",
         "maindescriptionSecnthrid":"description 3"
      },
      "location":"Sondekoppa, Karnataka, IN",
      "ipAddress":"157.49.147.190",
      "count":666
   }
]

Just wanted to tell you, that your JSON example is not valid. Remove the trailing comma. — Rumplin
– Rumplin, Commented Nov 5, 2020 at 14:14
@RameshLamani Do you use redux to do the sorting or just try to sort the entire thing inside a component? — Dushan Ranasinghage
– Dushan Ranasinghage, Commented Nov 5, 2020 at 14:27
Wanted to clarify that you would only sort on a single property at a time. That's how your question reads. — Randy Casburn
– Randy Casburn, Commented Nov 5, 2020 at 14:32
Ive always found it simple and straightforward to build a composite value from the properties you want to sort on that. It's harder (but not impossible) when the values include numbers and dates. — No Refunds No Returns
– No Refunds No Returns, Commented Nov 5, 2020 at 15:42

Nina Scholz · Accepted Answer · 2020-11-05 17:02:44Z

3

You could use a closure over the wanted key/keys and direction and use the returned function for sorting.

The sorting funtion uses function which splits the handed over key string by dot and gets the value from the (nested) object.

const
    sortBy = (key, direction = 'ascending') => (a, b) => {
        const
            factor = +(direction === 'ascending') || -1,
            getValue = (object, keys) => keys.split('.').reduce((o, k) => o?.[k], object),
            valueA = getValue(a, key),
            valueB = getValue(b, key);

        return factor * (valueA > valueB || -(valueA < valueB));
    },
    data = [{ Date: "2020-10-16T04:15:58+00:00", applicationName: "IAM Portal/IAM Portal", status: { foo: 'b', statusname: "Success", style: "success" }, details: { maindescription: "welcome to the application", maindescriptionSecn: "description 2", maindescriptionSecnthrid: "description 3" }, location: "Sondekoppa, Karnataka, IN", ipAddress: "157.49.147.190", count: 123 }, { Date: "2020-10-16T04:15:56+00:00", applicationName: "IAM Portal/IAM Portal", status: { foo: 'a', statusname: "Success", style: "success" }, details: { maindescription: "welcome to the application", maindescriptionSecn: "description 2", maindescriptionSecnthrid: "description 3" }, location: "Sondekoppa, Karnataka, IN", ipAddress: "157.49.147.190", count: 789 }, { Date: "2020-10-16T04:21:41+00:00", applicationName: "IAM Portal/Reports Hub", status: { foo: 'c', statusname: "Failure", style: "error" }, details: { maindescription: "welcome to the application", maindescriptionSecn: "description 2", maindescriptionSecnthrid: "description 3" }, location: "Sondekoppa, Karnataka, IN", ipAddress: "157.49.147.190", count: 666 }];

data.sort(sortBy('status.foo'));
console.log(data);

data.sort(sortBy('status.foo', 'descending'));
console.log(data);

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

edited Nov 5, 2020 at 17:02

answered Nov 5, 2020 at 14:46

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Ramesh Lamani Over a year ago

Solutions is closer, how it works for the descending order?

Nina Scholz Over a year ago

right, some value for descending sorting was missing. please see edit.

Ramesh Lamani Over a year ago

I tried, descending is not working. Where it is handled descending activities in the logic?

Nina Scholz Over a year ago

factor is either 1 or -1 for shaping the direction.

Ramesh Lamani Over a year ago

Can you detailed logic for the ascending and descending?

|

Collectives™ on Stack Overflow

How to Sort Dates, Numbers, Strings from the array of nested JSON objects in Javascript

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related