در این مقاله مرتب سازی اشیا json را توسط خصوصیت sort بررسی میکنیم ابتدا آرایه ای از داده های json ایجاد کرده سپس توسط jquery و خصوصیت sort برای json آرایه را بر اساس فیلد name مرتب میکنیم.

در این مقاله مرتب سازی اشیا json  را توسط خصوصیت sort بررسی میکنیم ابتدا آرایه ای از داده های json ایجاد میکنیم سپس توسط jquery و خصوصیت sort برای json آرایه را بر اساس یکی از فیلد های خود مرتب میکنیم.

ابتدا یک برنامه از نوع وب فرم ایجاد میکنیم و یک صفحه جدید به نام Default.aspx به آن اضافه میکنیم در صفحه خود در تگ Head ابتدا آدرس jquery را به صفحه خود میدهیم در اینجا از jquery نسخه 1.10.2 استفاده کردم

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

روش کار بسیار ساده و آسان است در اینجا نحوه استفاده از خصوصیت sort برای json  را نمایش خواهیم داد.

در ابتدا آرایه خود را به شکل زیر میسازیم:

 var data = '[{"name":1393,"data":[{"x":"1","y":222808746.81}]},{"name":1392,"data":[{"x":"2","y":289647045.18}]},{"name":1394,"data":[{"x":"2","y":285136890.07}]},{"name":1393,"data":[{"x":"3","y":370853178.74}]},{"name":1394,"data":[{"x":"3","y":403272964.28}]},{"name":1392,"data":[{"x":"4","y":217294031.36}]},{"name":1393,"data":[{"x":"4","y":224715039.94}]},{"name":1394,"data":[{"x":"4","y":249034460.23}]},{"name":1392,"data":[{"x":"5","y":215978054.15}]},{"name":1393,"data":[{"x":"5","y":241211810.92}]}]';  

درقسمت Body دو تا تگ Div ، یکی برای لیست مرتب نشده و دیگری برای لیست مرتب شده و یک دکمه برای مرتب سازی قرار میدهیم برای کنترل تگ ها توسط jquery برای آنها id تنظیم میکنیم.

    <div id="unsorted"></div>  
    <div id="sorted"></div>  
    <button id="makemesort">مرتب سازی</button>  

ابتدا لیست مرتب نشده را نشان می دهم :  

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

در تابع بالا ابتدا div با id=sorted را توسط تابع hide مخفی میکنیم سپس تابع loadUnsorted را فراخوانی میکنیم  ادامه تابع زمانی اتفاق می افتد که روی دکمه مرتب سازی کلیک شود.

در تابع loadunsorted ابتدا متغیر data خود را به شی json تبدیل میکنیم و برای نمایش آن یک جول با تگ های html میسازیم سپس یک حلقه روی شی json ی که ساختیم میزنیم و داده های خود را در تگ های td قرار میدهیم

        function loadUnsorted() {  
            jsonObject = $.parseJSON(data);  
            var html = '<table><th>سال</th><th>تعداد</th><th>فروش</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);  
        } 

حال زمانی که روی دکمه مرتب سازی کلیک کنیم تابع loadsorted فراخوانی میشود که در این تابع از خصوصیت sort شی json استفاده میکنیم که درون آن تابع دیگری به نام SortMe را فراخوانی میکنیم در تابع SortMe مرتب سازی روی فیلد name  که همان سال میباشد انجام میگیرد ادامه تابع loadsorted همانند loadunsortde می باشد برای نمایش اطلاعات مرتب شده یک جول با تگ های html میسازیم سپس یک حلقه روی شی json ی که ساختیم میزنیم و داده های خود را در تگ های td قرار میدهیم:

        function loadSorted() {  
            jsonObject.sort(SortMe);  
            var html = '<table><th>سال</th><th>تعداد</th><th>فروش</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));  
            }  
        }

در تابع SortMe ابتدا توسط یک شرط بررسی میکنیم که فیلد name خالی یا تعریف شده نمی باشد سپس دو شی برا مقایسه ایجاد میکنیم که ابتدا به رشته و حروف کوچک تبدیل کرده سپس عمل مقایسه روی آنها انجام میشود .

کد کامل صفحه به شکل زیر می باشد:

<head>  
    <title>Sort JSON Object by its property and show demo - Sibeesh Passion</title>  
   <script src="Scripts/jquery-1.10.2.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":1393,"data":[{"x":"1","y":222808746.81}]},{"name":1392,"data":[{"x":"2","y":289647045.18}]},{"name":1394,"data":[{"x":"2","y":285136890.07}]},{"name":1393,"data":[{"x":"3","y":370853178.74}]},{"name":1394,"data":[{"x":"3","y":403272964.28}]},{"name":1392,"data":[{"x":"4","y":217294031.36}]},{"name":1393,"data":[{"x":"4","y":224715039.94}]},{"name":1394,"data":[{"x":"4","y":249034460.23}]},{"name":1392,"data":[{"x":"5","y":215978054.15}]},{"name":1393,"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>سال</th><th>تعداد</th><th>فروش</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>سال</th><th>تعداد</th><th>فروش</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">مرتب سازی</button>  
</body>