Sorting JSON Object By Priorities

First off, I have a JSON object such as: { 'allSitesInfo': [{ 'title': 'Site001', 'website': 'http://www.example.com/', 'lat': '22.70896',

Solution 1:

You could take an object as hash table for the wanted order and use that object for sorting.

default contains a huge value Infinity to sort unknown types to the end.

var order = { "X": 1, "pause": 2, "wht-stars": 3, "grn-blank": 4, default: Infinity };

array.sort(function (a, b) {
    return (order[a.type] || order.default) - (order[b.type] || order.default);
});

Solution 2:

Add typeId depending upon how you want sort the type for example

{
    "allSitesInfo": [
{
            "title": "Site001",
            "website": "http://www.example.com/",
            "lat": "22.70896",
            "lng": "120.35197",
            "content": {
                "PR": "87.89",
                "kWh": "1700"
            },
            "type": "x",
            "typeid":1
        },
{
            "title": "Site001",
            "website": "http://www.example.com/",
            "lat": "22.70896",
            "lng": "120.35197",
            "content": {
                "PR": "87.89",
                "kWh": "1700"
            },
            "type": "pause",
            "typeid"2
        },
{
            "title": "Site001",
            "website": "http://www.example.com/",
            "lat": "22.70896",
            "lng": "120.35197",
            "content": {
                "PR": "87.89",
                "kWh": "1700"
            },
            "type": "wht-stars",
            "typeid":3
        },
{
            "title": "Site001",
            "website": "http://www.example.com/",
            "lat": "22.70896",
            "lng": "120.35197",
            "content": {
                "PR": "87.89",
                "kWh": "1700"
            },
            "type": "grn-blank",
            "typeid":4
        }
    ]
}

and sort them before uppending into the DOM

Solution 3:

You can sort using array.sort. Here is the final code:

function GetRealTimeList() {
    var url = "ajaxHandler.jhp";
    var args = {};

    args["task"] = "GetRealTimeList";

    $.ajax({
            url: url,
            method: "GET",
            data: args,
        })
        .done(function (data) {

            var allSites = JSON.parse(data);
            var sorted = allSites.allSitesInfo.sort(compare)

            sorted.forEach((item, index) => {
                $("#custom-search-site").append(
                    "<li><img src=\"img/paddle/" + allSites["allSitesInfo"][i]["type"] + "_maps.png\" class=\"blank\"><span>" + allSites["allSitesInfo"][i]["title"] + "</span></li>"
                );
            })

        })
        .fail(function (data) {
            console.log("Get real time data fail. " + data);
        });
}

function compare(a, b) {
    var order = {
        "X": 0,
        "pause": 1,
        "wht-stars": 2,
        "grn-blank": 3
    };

    // a should come first
    if (order[a.type] < order[b.type]) {
        return -1;
    }

    // b should come first
    else if (order[a.type] > order[b.type]) {
        return 1;
    };

    return 0;
}

Solution 4:

see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

var allSites = JSON.parse(data);
let m = {"X":1, "pause":2, "wht-stars":3, "grn-blank":4}
var sortedData = allSites.sort((a,b)=> {return a[m[type]]> b[m[type]];  });
// print result

Solution 5:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

You can use the sort function I'd create a key object assigning a value and the name of the type then use the sort function to reorder the elements

const sites  =  [
  {
    "type": "X"
  },
  {
     "type": "wht-stars"
  },
  {
     "type": "pause"
  },
  {
    "type": "grn-blank"
  }
];
  
const key = {
  "grn-blank": 1,
  "pause": 0,
  "wht-stars": -1,
  "X": -2
}

const arr = sites.sort((a, b) => key[a.type] < key[b.type] ? 1 : -1);

console.log(arr)