Sorting a JQuery list, populated from a JSon array

Question

I tried many different methods but can't seem to work this one out. I have a JSon array which populates my JQuery list. The list displays correctly, but I cant seem to be able to filter it.

I'd like to be able to filter by name or price. I tried the JQuery .Filter method and many others, and they all failed. I'd also like to make it as a link. ( The user clicks sort by name, and it sorts... )

Heres what I have so far, which I was convinced would work.

Any help is greatly appreciated, Thanks !

.js file :



// Json array
var productList = {"products": [
    {"description": "Product 1", "price": "3.25"},
    {"description": "Product 4", "price": "9.97"},
    {"description": "Product 3", "price": "4.21"},
    {"description": "Product 2", "price": "5.24"},
    {"description": "Product 5", "price": "8.52"}
]
};

function loadList() {

var list = $("#productList").listview();


// load array into list

$(productList.products).each(function(index) {
    $(list).append('<li id="listitem">' + this.description + "  " +
            "    :     " + this.price + '</li>');

     // sort by price 
     $(productList.products).filter(function ()
     { return parseFloat(this.price) < 11;})


});

    $(list).listview("refresh");

}

sje397 · Accepted Answer · 2011-06-30 14:46:47Z

6

How about this for sorting:

var prods = productList.products.sort(function(a, b) {return parseInt(a.price) < parseInt(b.price);});
$.each(prods, function() {
    list.append("<li>" + this.description + " : " + this.price + "</li>");
});

To sort by description, you could use this instead:

var prods = productList.products.sort(function(a, b) {return a.description < b.description;});

If you just want to filter, you could substitute:

var prods = productList.products.filter(function(item) {return parseInt(item.price) < 5;});

answered Jun 30, 2011 at 14:46

sje397

41.9k9 gold badges90 silver badges106 bronze badges

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

3 Comments

sje397 Over a year ago

@JFFF - I wouldn't have been quite so blunt if I'd noticed earlier that you said 'this is an assignment I have' :) You should tag such questions with 'homework' and people will help you learn instead of just blurting out the answer.

Levi Morrison Over a year ago

Drats, I was about to post jsfiddle.net/morrison/CFnry It doesn't use jQuery, so it should be faster, though most likely negligibly.

JFFF Over a year ago

The fact that you gave me the answer instead of showing me doesn't mean I won't learn. I'm not just gonna sit there and take your answer as my own work. Your answer is setting me in the right direction, so now I can continue working and try to attach the filter to a link or something. Thanks again !

Bryan A · Accepted Answer · 2011-06-30 14:39:35Z

0

This sort of filtering is typically best done on the server-side end of things. Have you tried applying the filtering at the DB or application-levels?

answered Jun 30, 2011 at 14:39

Bryan A

3,6341 gold badge26 silver badges29 bronze badges

1 Comment

JFFF Over a year ago

No, and I cant really do so. This is an assigment I have, and I need to filter the lists dynamicaly with a button or a link. But first I'll have to find a way to actually make the filter work...

Peter DeWeese · Accepted Answer · 2011-06-30 15:02:28Z

0

There have been a lot of json path (xpath like) tools popping up for this kind of purpose. Check out http://goessner.net/articles/JsonPath/

answered Jun 30, 2011 at 15:02

Peter DeWeese

18.4k8 gold badges83 silver badges104 bronze badges

Collectives™ on Stack Overflow

Sorting a JQuery list, populated from a JSon array

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related