I just got amazing feedback for my previous question but now I’m stuck again.
I have a JQuery listview displaying my json array. It’s working fine.
But now, I’d like to be able to filter my results by name or price. I looked up the jQuery.grep() method but can’t really get it to work correctly.
If anyone could give some pointers on how I could get this to work, it would be greatly appreciated once again.
Heres the code I have so far :
js file :
// Json array
var productList = {"products": [
{"description": "Product 1", "price": "9.99$"},
{"description": "Product 2", "price": "9.97$"},
{"description": "Product 3", "price": "8.52$"},
{"description": "Product 4", "price": "5.24$"},
{"description": "Product 5", "price": "4.21$"}
]
};
function loadList() {
// var list = document.getElementById('productList');
var list = $("#productList").listview();
list.sort();
$(productList.products).each(function(index){
$(list).append('<li id="listitem">' + this.description + " " +
" : " + this.price + '</li>');
});
$(list).listview("refresh");
}<code>
HTML file :
<html>
<head>
<title>Product List</title>
&meta;
<script src="@=site.cfg.resources.url@/test.js"></script>
</head>
<body onLoad="loadList()">
<div data-role="page">
<div data-role="header" id="header">
<h1>Product List</h1>
</div>
<div data-role="content" id="content">
<ul id="productList" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
</ul>
</div>
</div>
</body>
</html>
.filter() should do what you’re looking for, I think.