在jQuery列表中循环通过JSON数组_Jquery_Json

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

jquery json

在jQuery列表中循环通过JSON数组,jquery,json,Jquery,Json,我有这个JSON数组 // Json array var productList = {"products": [ {"description": "product 1", "price": "9.99"}, {"description": "product 2", "price": "9.99"}, {"description": "product 3", "price": "9.99"} ] }; 我想让它在我的列表视图中循环，但不知道怎么做到目前为止，我所能做的

我有这个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论坛inst帮助。。。谢谢

下面是代码的其余部分

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>


页面标题
&元；
动态产品列表

使用下面描述的“JSON数组”或名称更好的JavaScript对象，您可以使用for循环遍历它。productlist是一个包含数组的对象，该数组中的每个元素都是一个包含2个属性或变量（description和price）的对象。通过使用从0开始到数组长度-1结束的典型for循环，可以迭代数组……每个数组元素中的对象可以通过使用“for（key-in-object）”符号进行迭代

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

下面是一个迭代Javascript对象的示例

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

for（var i=0；i

退房
$。每个（productList.products，函数（索引，值）{
$（列表）.append（“”+value.description+”：“+value.price+””）；
});
既然您已经在使用jQuery，为什么不使用
而不是此代码：
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>');
});

$（productList.products）。每个（函数（索引）{
$（list.append（“”+this.description+”=“+this.price+””）；
});
在我看来，您真正需要的是.tmpl
插件，用于根据json数据构建列表：
谢谢你的快速回答，我会试试：如果你已经在使用jQuery，我会坚持使用$。每个都像其他人说的那样：更干净。谢谢。这看起来是可行的，但我不知道在我的代码中放在哪里，也不知道如何让它与我的JQuery列表一起工作。我是一名初级程序员，还在学习。。。跟我说：P@john，我已更新了我的答案，以便它与您的situation@John，您应该设置class
而不是ID。页面上的每个ID都应该是唯一的。我只是想指出这一点。祝你好运。@JFFF鉴于你才刚刚开始，我现在将集中精力使用核心jQuery来解决你的问题。一旦您对它感到满意，并且对您正在做的事情感到满意，那么请务必查看jquery.tmpl之类的内容。但对于你现在所需要的东西来说，这可能太过分了。
$(productList.products).each(function(index){
    $(list).append('<li id="listitem">' + this.description + " = " + this.price + '</li>');
});