How to sort data of json object and display accordingly in html?

Question

This is my ajax:

$("form").on("submit", function () {
    var data = {
        "action": "test"
    };

    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "ajax2.php",
        data: data,
        success: function (data) {


            $("#main_content").slideUp("normal",function(){

            //$(".the-return").html("<br />JSON: " + data+"<br/>");
            for (i = 0; i < data.length; i++) {


$(".the-return").append("<div class='inside_return'>Name:" + data[i].name + "<br/>Id:" + data[i].id + "<br/>Pricing:" + data[i].rate + "<br/>Postcode:" + data[i].postcode+ "<br/>Reputation:" + data[i].reputation+"<br/>Review Plus:" + data[i].plus+"<br/>Review Negative:" + data[i].neg+"<br/><h1>Availability</h1>Week Morning:" + data[i].weekM+"<br/>Week Afternoon:" + data[i].weekA+"<br/>Week Evening:" + data[i].weekE+"<br/>Weekend Morning:" + data[i].endM+"<br/>Weekend Afternoon:" + data[i].endA+"<br/>Week Evening:" + data[i].endE+"</div>");


            //alert(data[i].name) 
        }

            });
        }


    });
    return false;


});

Above is my ajax. Now this is returning result from query that sorts by postcode by default.

Now when the result displayed, I want to let the user to sort it out by reputation, review and so on..How do I do that.

Put it in a simple way, I just need to alter the order by clause in the query so that it can sort by user selection. What's the easiest way to do it please?

How can I manipulate below part where it appends the result to a div called -the-return so that it sorts by whatever key user use?: Note-> I'm presenting the result in <div> block and not in table.

 $(".the-return").append("<div class='inside_return'>Name:" + data[i].name + "<br/>Id:" + data[i].id + "<br/>Pricing:" + data[i].rate + "<br/>Postcode:" + data[i].postcode+ "<br/>Reputation:" + data[i].reputation+"<br/>Review Plus:" + data[i].plus+"<br/>Review Negative:" + data[i].neg+"<br/><h1>Availability</h1>Week Morning:" + data[i].weekM+"<br/>Week Afternoon:" + data[i].weekA+"<br/>Week Evening:" + data[i].weekE+"<br/>Weekend Morning:" + data[i].endM+"<br/>Weekend Afternoon:" + data[i].endA+"<br/>Week Evening:" + data[i].endE+"</div>");

WHat I tried:

success: function (data) {

//I used a function to sort//

data.sort(function (a, b) {
    var retVal = 0;
    switch (sortOption) {
        case 1:
            retVal = a.property > b.property ? 1 : (a.property < b.property ? -1 : 0);
            break;
            // .... many cases here
    }
    return retVal;
});

//sort function ends here//

$("#main_content").slideUp("normal", function () {
    for (i = 0; i < data.length; i++) {

        $(".the-return").append("<div class='inside_return'>Name:" + data[i].name + "<br/>Id:" + data[i].id + "<br/>Pricing:" + data[i].rate + "<br/>Postcode:" + data[i].postcode + "<br/>Reputation:" + data[i].reputation + "<br/>Review Plus:" + data[i].plus + "<br/>Review Negative:" + data[i].neg + "<br/><h1>Availability</h1>Week Morning:" + data[i].weekM + "<br/>Week Afternoon:" + data[i].weekA + "<br/>Week Evening:" + data[i].weekE + "<br/>Weekend Morning:" + data[i].endM + "<br/>Weekend Afternoon:" + data[i].endA + "<br/>Week Evening:" + data[i].endE + "</div>");

    }

});

}

so when a user clicks a button, it fire the sorting function..Sadly it doesn't work..Placing the function within success, doesn't perform search function it was doing earlier without any sort. Even if I placed it outside the function , still doesn't work.

canolucas · Accepted Answer · 2015-05-08 04:24:40Z

1

To sort an array, you can use Array.prototype.sort.

Without any arguments, it attempts to sort elements alphabetically, but you can pass in a comparing function instead.

The function will receive two arguments and should return less than 0, 0 or greater than 0 to define where argument 1 should be in relation to argument 2.

Your sorting function should look something like this:

data.responseData.sort(function (a, b) {
    switch (sortOption) {
        case 1:
            a = a.name,
            b = b.name;
            type = "string";
        case 2:
            a = a.reputation,
            b = b.reputation;
            type = "numeric";
        // etc
    }
    if (type == "numeric")
    {
        // numeric comparison
        return a > b ? 1 : (a < b ? -1 : 0);
    } else if (type == "string") {

        // string comparison
        return a.localeCompare(b); 
    }
    // etc

    return;
});

localeCompare will compare the strings for you :)

edited May 8, 2015 at 4:24

answered May 8, 2015 at 4:16

canolucas

1,4901 gold badge15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

sherly Over a year ago

where can I place it?? inside success function?

canolucas Over a year ago

yes, but take in account that different comparisons will be needed according to each property type

sherly Over a year ago

if i place it in success function, the default operation before sorting doesn't work..Actually I've been trying this kind of function since last night, but just unsure where to place and wonder how the html will sort by itself when the sort function fired!

canolucas Over a year ago

dont fire it always, only fire it if the user has triggered the action. in example, if the user triggered the action, set a variable userTrigger to true, and only sort if userTrigger == true. By the way, you will have to clean the container, in order so that in can append the new data only. Oh, and you will need to submit the form when the user sorts.

sherly Over a year ago

this is what I was waiting to hear about..Can you explain more on what you mean by 'clean the container' ? I guess if I solve this mystery the rest should be doable to me...

|

Collectives™ on Stack Overflow

How to sort data of json object and display accordingly in html?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related