HOW CAN I SORT JSON ARRAY BY CERTAIN VALUE OFF THE KEY:VALUE PAIR ?

4.93K viewsProgramming
0

How to sort a json array based on a certain value corresponding to a key ?

Changed status to publish
0

window.onload = init;
 // sample JSON object   
var json = {
    "data": [{
            "name": "Mayweather_vs_Berto-Round5",
            "description": "T ; C : https://www.foxtel.com.au/about/customer-terms.html\ 
            Pound -
            for -pound boxing champion Floyd 'Money'
            Mayweather Jr.\
            (48 - 0 - 0) returns to the ring against Andre Berto(30 - 3 - 0) for\
            what may be the final fight of the unbeaten boxer 's career.",
            "date": "2017-08-02",
            "duration": "60",
            "noCancelAfter": "2017-08-02T09:30:00+10:30",
            "offer": {
                "id": "6623556",
                "validFor": {
                    "startDateTime": "2017-08-02T09:30:00+10:30",
                    "endDateTime": "2017-08-02T23:30:00+10:30"
                },
                "sessions": [{
                        "startDateTime": "2017-08-02T09:30:00+10:30",
                        "channel": "518"
                    },
                    {
                        "startDateTime": "2017-08-02T10:30:00+10:30",
                        "channel": "518"
                    },
                    {
                        "startDateTime": "2017-08-02T18:30:00+10:30",
                        "channel": "518"
                    }
                ]
            },
            "order": {
                "id": "99821982003",
                "whenCreated": "2017-06-08T14:26:26+10:30"
            }
        },
        {
            "name": "Patriots Day",
            "description": "Patriots Day",
            "date": "2017-08-01",
            "duration": "60",
            "noCancelAfter": "2017-08-01T09:30:00+10:30",
            "offer": {
                "id": "6623558",
                "validFor": {
                    "startDateTime": "2017-08-01T09:30:00+10:30",
                    "endDateTime": "2017-08-01T23:30:00+10:30"
                },
                "sessions": [{
                        "startDateTime": "2017-08-01T09:30:00+10:30",
                        "channel": "518"
                    },
                    {
                        "startDateTime": "2017-08-01T10:30:00+10:30",
                        "channel": "518"
                    },
                    {
                        "startDateTime": "2017-08-01T18:30:00+10:30",
                        "channel": "518"
                    }
                ]
            },
            "order": {
                "id": "99821981003",
                "whenCreated": "2017-06-08T14:25:22+10:30"
            }
        },
        {
            "name": "Mayweather_vs_Berto-Round5",
            "description": "T ; C : https://www.foxtel.com.au/about/customer-terms.html\
            Pound-for-pound boxing champion Floyd 'Money' Mayweather Jr. (48-0-0) returns\
            to the ring against Andre Berto (30-3-0)  for what may be the final fight of\
            the unbeaten boxer's career.",
            "date": "2017-08-02",
            "duration": "60",
            "noCancelAfter": "2017-08-02T09:30:00+10:30",
            "offer": {
                "id": "6623556",
                "validFor": {
                    "startDateTime": "2017-08-02T09:30:00+10:30",
                    "endDateTime": "2017-08-02T23:30:00+10:30"
                },
                "sessions": [{
                        "startDateTime": "2017-08-02T09:30:00+10:30",
                        "channel": "518"
                    },
                    {
                        "startDateTime": "2017-08-02T10:30:00+10:30",
                        "channel": "518"
                    },
                    {
                        "startDateTime": "2017-08-02T18:30:00+10:30",
                        "channel": "518"
                    }
                ]
            },
            "order": {
                "id": "99821982003",
                "whenCreated": "2017-06-08T14:26:26+10:30"
            }
        },
        {
            "name": "Patriots Day",
            "description": "Patriots Day",
            "date": "2017-08-01",
            "duration": "60",
            "noCancelAfter": "2017-08-01T09:30:00+10:30",
            "offer": {
                "id": "6623558",
                "validFor": {
                    "startDateTime": "2017-08-01T09:30:00+10:30",
                    "endDateTime": "2017-08-01T23:30:00+10:30"
                },
                "sessions": [{
                        "startDateTime": "2017-08-01T09:30:00+10:30",
                        "channel": "518"
                    },
                    {
                        "startDateTime": "2017-08-01T10:30:00+10:30",
                        "channel": "518"
                    },
                    {
                        "startDateTime": "2017-08-01T18:30:00+10:30",
                        "channel": "518"
                    }
                ]
            },
            "order": {
                "id": "99821981003",
                "whenCreated": "2017-06-08T14:25:22+10:30"
            }
        }
    ]
}
  function init() {
     document.write('<pre><h2>Unsorted JSON : </h2>' + JSON.stringify(json, 0, 4) + '</pre><br />');
     json = Object.keys(json).map(function(k) {
        return json[k]
    });
    var data = json[0];
     jsonSortByKey(data, 'startDateTime');
}
 // this is the main function responsible for sorting the array, in this case its date value
function jsonSortByKey(data, key) {
    data.sort(function(a, b) {
        // if date create and compare date objects. This will change for other type of values
        return new Date(getObject(a, key)).getTime() > new Date(getObject(b, key)).getTime();
    });
     document.write('<pre><h2>Sorted JSON by date (startDateTime) : </h2>' + JSON.stringify(data, 0, 4) + '</pre>');
}
  // recursively loop through the JSON object or array and find the JSON property by value
function getObject(theObject, key) {
    var result = null;
    if (theObject instanceof Array) {
        for (var i = 0; i < theObject.length; i++) {
            result = getObject(theObject[i], key);
            if (result) {
                break;
            }
        }
    } else {
        for (var prop in theObject) {
            if (prop == key) {
                return theObject[prop];
            }
            if (theObject[prop] instanceof Object || theObject[prop] instanceof Array) {
                result = getObject(theObject[prop], key);
                if (result) {
                    break;
                }
            }
        }
    }
    return result;
}

Demo:- https://codepen.io/golibrary/pen/jwgNqr

Edited answer
Write your answer.

Categories