循环通过 jQuery 列表中的 JSON 数组

Question

我有这个 JSON 阵列

// Json array
var productList = {"products": [
    {"description": "product 1", "price": "9.99"},
    {"description": "product 2", "price": "9.99"},
    {"description": "product 3", "price": "9.99"}
]
};

我希望它循环浏览我的列表视图，但不知道如何做到这一点，到目前为止我所能做的就是一次列出一个项目。 另外，我只能列出产品而不是产品 = 价格。 jQuery 论坛帮助...谢谢！

这是代码的rest

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");

和 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>

Answer 1

既然您已经在使用 jQuery，为什么不使用$.each() function呢？

而不是这段代码：

var listItem = document.createElement('li');
listItem.setAttribute('id', 'listitem');

listItem.innerHTML = productList.products[0].description;

$(list).append(listItem);

用这个：

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

Answer 2

查看jQuery.each()

$.each(productList.products, function(index, value) {
   $(list).append('<li>' + value.description + ': ' + value.price + '</li>');
});

Answer 3

使用下面描述的“JSON 数组”或更好命名的 JavaScript object，您可以使用 for 循环遍历它。 productlist 是一个包含一个数组的 object，该数组中的每个元素都是一个包含 2 个属性或变量（描述和价格）的 object。 可以使用从 0 开始并以数组 lenght - 1 结束的典型 for 循环来迭代数组。每个数组元素内的对象可以通过使用“for（对象中的键）”表示法进行迭代。

// Json array
var productList = {"products": [
    {"description": "product 1", "price": "9.99"},
    {"description": "product 2", "price": "9.99"},
    {"description": "product 3", "price": "9.99"}
]
};

这是一个遍历 Javascript Object 的示例。

for (var i = 0; i < productList.products.length; i ++) {
  for (var key in productList.products) {
    alert(key + ":" + productList.products[key]);
  }
}

Answer 4

在我看来，您真正需要的是.tmpl插件来根据您的 json 数据构建您的列表：

http://api.jquery.com/jquery.tmpl/