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:

functionGetRealTimeList() {
    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);
        });
}

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

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

    // b should come firstelseif (order[a.type] > order[b.type]) {
        return1;
    };

    return0;
}

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)