looping through JSON array in a jQuery list
I have this JSON array
// Json array
var productList = {"products": [
{"description": "product 1", "price": "9.99"},
{"description": "product 2", "price": "9.99"},
{"description": "product 3", "price": "9.99"}
]
};
I want it to loop through my list view but have no idea how to do this all I can do so far is list one item at a time. Also, I can only list the product and not the product = the price. The jQuery forum inst helping... thanks !!
Here's the rest of the code
function loadList() {
// var list = document.getElementById('productList');
var list = $("#productList").listview();
var listItem = document.createElement('li');
listItem.setAttribute('id', 'listitem');
listItem.innerHTML = productList.pr开发者_运维知识库oducts[0].description;
$(list).append(listItem);
$(list).listview("refresh");
and the HTML file
<html xmlns:f="http://www.lipso.com/f" xmlns:l="http://www.lipso.com/v2/lml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<head>
<title>Page Title</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>Dynamic 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>
Since you're already using jQuery, why don't you use the $.each() function?
Instead of this code:
var listItem = document.createElement('li');
listItem.setAttribute('id', 'listitem');
listItem.innerHTML = productList.products[0].description;
$(list).append(listItem);
Use this:
$(productList.products).each(function(index){
$(list).append('<li id="listitem">' + this.description + " = " + this.price + '</li>');
});
Check out jQuery.each()
$.each(productList.products, function(index, value) {
$(list).append('<li>' + value.description + ': ' + value.price + '</li>');
});
Using the "JSON array" or better named JavaScript object described below you can loop through it using for loops. productlist is an object that contains an array and each element in this array is an object that contains 2 properties or variables (description and price). The array can be iterated though using a typical for loop starting at 0 and ending at the array lenght - 1....the objects inside each array element can be iterated through using the "for (key in object)" notation.
// Json array
var productList = {"products": [
{"description": "product 1", "price": "9.99"},
{"description": "product 2", "price": "9.99"},
{"description": "product 3", "price": "9.99"}
]
};
Here is an example of iterating through your Javascript Object.
for (var i = 0; i < productList.products.length; i ++) {
for (var key in productList.products) {
alert(key + ":" + productList.products[key]);
}
}
I appears to me that what you really need is the .tmpl plugin to build your list from your json data:
http://api.jquery.com/jquery.tmpl/
加载中,请稍侯......
精彩评论