Sort a JSON Array Programmatically by a Property

Introduction

In this post, we will learn how to sort a JSON object by its property. We will be using normal jQuery features to do this. I hope you will like it.

Background

Yesterday, I had a situation where I needed to sort my JSON object that I am creating using server data. So I though of sharing that with you all.

Using the Code

First of all, we will add a jQuery reference as in the following:

<script src="jquery-2.1.4.min.js"></script>

Now we need some, data right? Please have a look at the following JSON data.

var data = ‘[{"name":2014,"data":[{"x":"1″,"y":222808746.81}]},
{"name":2013,"data":[{"x":"2″,"y":289647045.18}]},
{"name":2014,"data":[{"x":"2″,"y":285136890.07}]},
{"name":2013,"data":[{"x":"3″,"y":370853178.74}]},
{"name":2014,"data":[{"x":"3″,"y":403272964.28}]},
{"name":2012,"data":[{"x":"4″,"y":217294031.36}]},
{"name":2013,"data":[{"x":"4″,"y":224715039.94}]},
{"name":2014,"data":[{"x":"4″,"y":249034460.23}]},
{"name":2012,"data":[{"x":"5″,"y":215978054.15}]},
{"name":2013,"data":[{"x":"5″,"y":241211810.92}]}]’;

Next, we need some UI elements. Am I right?

<div id="unsorted"></div>
    <div id="sorted"></div>
    <button id="makemesort">Make Me Sort</button>

What next? We need to show this data to our UI, right? For that, I am calling a function in our document ready function.

var jsonObject;
        $(function () {
            $(‘#sorted’).hide();
            loadUnsorted();
            $(‘#makemesort’).click(function () {
                loadSorted();
                $(‘#makemesort’).hide();
                $(‘#sorted’).show();
            });
        });

The following is the function definition for the loadUnsorted() function.

function loadUnsorted() {
           jsonObject = $.parseJSON(data);
           var html = ‘<table><th>Year</th>
           <th>X Value</th><th>Y Value</th>’;
           for (i = 0; i < jsonObject.length; i++) {
               html += ‘<tr><td>’ + jsonObject[i].name + 
               ‘</td><td>’ + 
               jsonObject[i].data[0].x + ‘</td><td>’ + 
               jsonObject[i].data[0].y + ‘</td></tr>’;
           }
           html += ‘</table>’;
           $(‘#unsorted’).append(html);
       }

What we are doing here is parsing our data and appending the data to our UI element using a for loop.

Now if you run it, you will get output as follows:

Now we have successfully formatted our data and shown it to our UI. Cool, right?
So shall we go and sort our data? I guess you said “Yes”. Awesome.
Now, we will create a click event for our “Make me sort” button as in the following:

$(‘#makemesort’).click(function () {
                loadSorted();
                $(‘#makemesort’).hide();
                $(‘#sorted’).show();
            });

So here is the definition for the loadSorted() function.

function loadSorted() {
           jsonObject.sort(SortMe);
           var html = ‘<table><th>Year</th>
           <th>X Value</th><th>Y Value</th>’;
           for (i = 0; i < jsonObject.length; i++) {
               html += ‘<tr><td>’ + jsonObject[i].name + 
               ‘</td><td>’ + jsonObject[i].data[0].x + 
               ‘</td><td>’ + jsonObject[i].data[0].y + 
               ‘</td></tr>’;
           }
           html += ‘</table>’;
           $(‘#sorted’).append(html);
       }

Now, I guess you could determine the difference of both the loadSorted() and loadUnsorted() functions. Yeah, you are right. I am calling a sort function “sortMe” there.

function SortMe(a, b) {
           if (b.name != null && b.name != undefined && a.name != null && a.name != undefined) {
               var First = a.name.toString().toLowerCase();
               var Second = b.name.toString().toLowerCase();
               return ((First < Second) ? -1 : ((First > Second) ? 1 : 0));
           }
       }

What our “sortMe” function does is, it will take two objects at a time and compare those by the property “name” of each object.

(First < Second) ? -1 : ((First > Second) ? 1 : 0)

Now, shall we look into the complete code? We have done everything folks.

Complete Code

<!DOCTYPE html>
<html>
<head>
    <title>Sort JSON Object by its property and show demo – Sibeesh Passion</title>
    <script src="jquery-2.1.4.min.js"></script>
    <style>
        #unsorted {
            border: 1px solid #999;
            width:220px;
            padding:10px;
            float:left;
        }
        #sorted {
            border: 1px solid #999;
            width:220px;
            padding:10px;
            float:left;
        }
         td {
            border: 1px solid #ccc;
            padding: 5px;
            text-align: center;
        }
    </style>
    <script>
        var data = ‘[{"name":2014,"data":[{"x":"1″,"y":222808746.81}]},
                   {"name":2013,"data":[{"x":"2″,"y":289647045.18}]},
                   {"name":2014,"data":[{"x":"2″,"y":285136890.07}]},
                   {"name":2013,"data":[{"x":"3″,"y":370853178.74}]},
                   {"name":2014,"data":[{"x":"3″,"y":403272964.28}]},
                   {"name":2012,"data":[{"x":"4″,"y":217294031.36}]},
                   {"name":2013,"data":[{"x":"4″,"y":224715039.94}]},
                   {"name":2014,"data":[{"x":"4″,"y":249034460.23}]},
                   {"name":2012,"data":[{"x":"5″,"y":215978054.15}]},
                   {"name":2013,"data":[{"x":"5″,"y":241211810.92}]}]’;
        var jsonObject;
        $(function () {
            $(‘#sorted’).hide();
            loadUnsorted();
            $(‘#makemesort’).click(function () {
                loadSorted();
                $(‘#makemesort’).hide();
                $(‘#sorted’).show();
            });
        });
        function loadUnsorted() {
            jsonObject = $.parseJSON(data);
            var html = ‘<table><th>Year</th>
            <th>X Value</th><th>Y Value</th>’;
            for (i = 0; i < jsonObject.length; i++) {
                html += ‘<tr><td>’ + jsonObject[i].name + 
                ‘</td><td>’ + 
                jsonObject[i].data[0].x + ‘</td><td>’ + 
                jsonObject[i].data[0].y + ‘</td></tr>’;
            }
            html += ‘</table>’;
            $(‘#unsorted’).append(html);
        }
        function loadSorted() {
            jsonObject.sort(SortMe);
            var html = ‘<table><th>Year</th>
            <th>X Value</th><th>Y Value</th>’;
            for (i = 0; i < jsonObject.length; i++) {
                html += ‘<tr><td>’ + 
                jsonObject[i].name + ‘</td><td>’ + 
                jsonObject[i].data[0].x + ‘</td><td>’ + 
                jsonObject[i].data[0].y + ‘</td></tr>’;
            }
            html += ‘</table>’;
            $(‘#sorted’).append(html);
        }
        function SortMe(a, b) {
            if (b.name != null && b.name != undefined && 
            a.name != null && a.name != undefined) {
                var First = a.name.toString().toLowerCase();
                var Second = b.name.toString().toLowerCase();
                return ((First < Second) ? -1 : ((First > Second) ? 1 : 0));
            }
        }
    </script>
</head>
<body>
    <div id="unsorted"></div>
    <div id="sorted"></div>
    <button id="makemesort">Make Me Sort</button>
</body>
</html>

So now, it is time to see our output. I am eager to see it.

You can find we have sorted our object and shown it in a separate table. Cool.
That is all for the day. I will return with another article soon.

Conclusion

I hope you liked this article. Please share your valuable thoughts and comments. Your feedback is always welcome. Thanks in advance. Happy coding!.