在 jQuery 列表中循环遍历 JSON 数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6524920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
looping through JSON array in a jQuery list
提问by JFFF
I have this JSON array
我有这个 JSON 数组
// 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 !!
我希望它遍历我的列表视图，但不知道如何做到这一点，到目前为止我能做的就是一次列出一项。另外，我只能列出产品而不是产品=价格。jQuery 论坛帮助...谢谢！
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.products[0].description;
$(list).append(listItem);
$(list).listview("refresh");
and the HTML file
和 HTML 文件
<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>
回答by rockerest
Since you're already using jQuery, why don't you use the $.each() function?
既然您已经在使用 jQuery，为什么不使用$.each() 函数呢？
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>');
});
回答by fehays
Check out jQuery.each()
$.each(productList.products, function(index, value) {
$(list).append('<li>' + value.description + ': ' + value.price + '</li>');
});
回答by John Hartsock
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 数组”或更好命名的 JavaScript 对象，您可以使用 for 循环遍历它。productlist 是一个包含数组的对象，该数组中的每个元素都是一个包含 2 个属性或变量（描述和价格）的对象。可以使用典型的 for 循环迭代数组，该循环从 0 开始并以数组 lenght - 1 结束......每个数组元素内的对象可以通过使用“for（对象中的键）”表示法进行迭代。
// 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.
这是一个遍历 Javascript 对象的示例。
for (var i = 0; i < productList.products.length; i ++) {
for (var key in productList.products) {
alert(key + ":" + productList.products[key]);
}
}
回答by ShaneBlake
I appears to me that what you really need is the .tmplplugin to build your list from your json data:
在我看来，您真正需要的是.tmpl从 json 数据构建列表的插件：
