lặp qua mảng JSON trong một danh sách jQuery

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

Tôi muốn nó lặp qua xem danh sách của tôi, nhưng không có ý tưởng làm thế nào để làm này tất cả những gì có thể làm được cho đến nay là danh sách một mục tại một thời điểm. Ngoài ra, tôi chỉ có thể liệt kê sản phẩm chứ không phải sản phẩm = giá. Các diễn đàn jQuery inst giúp ... cảm ơn !!

Dưới đây là phần còn lại của mã

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

và tập tin 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="@[email protected]/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>

Nguồn

2011-06-29 JFFF

Kể từ khi bạn đã sử dụng jQuery, tại sao bạn không sử dụng $.each() function?

Thay vì mã này:

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

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

$(list).append(listItem);

Sử dụng này:

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

Nguồn

2011-06-29 17:50:41 rockerest

Cảm ơn. điều này có vẻ như nó có thể làm việc nhưng tôi không có ý tưởng nơi để đặt này trong mã của tôi hoặc làm thế nào để có được nó để làm việc với danh sách JQuery của tôi. – JFFF

Tôi là một lập trình viên cơ sở và vẫn đang học ... trần với tôi: P – JFFF

@ john, tôi đã cập nhật câu trả lời của tôi để nó ** nên ** làm việc với tình huống của bạn – rockerest

Sử dụng "JSON mảng" hoặc tên tốt hơn đối tượng JavaScript được mô tả bên dưới, bạn lặp qua nó có thể sử dụng cho vòng lặp. productlist là một đối tượng có chứa một mảng và mỗi phần tử trong mảng này là một đối tượng có chứa 2 thuộc tính hoặc biến (mô tả và giá). Mảng có thể được lặp lại mặc dù sử dụng một vòng lặp điển hình bắt đầu từ 0 và kết thúc tại mảng chiều dài - 1 .... các đối tượng bên trong mỗi phần tử mảng có thể được lặp lại thông qua việc sử dụng ký hiệu "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"} 
] 
};

Đây là ví dụ về việc lặp qua đối tượng Javascript của bạn.

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

Nguồn

2011-06-29 17:46:25

Cảm ơn câu trả lời nhanh, tôi sẽ thử: D – JFFF

Nếu bạn đã sử dụng jQuery, tôi sẽ dính vào '$ .each' như những người khác đã nói: sạch hơn nhiều. – Ben

Check-out jQuery.each()

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

Nguồn

2011-06-29 17:49:52 fehays

tôi dường như với tôi rằng những gì bạn thực sự cần là plugin .tmpl để xây dựng danh sách của bạn từ dữ liệu json của bạn:

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

Nguồn

2011-06-29 17:50:58 ShaneBlake

Tôi sẽ kiểm tra điều đó, cảm ơn! – JFFF

@ JFFF cho rằng bạn chỉ mới bắt đầu, tôi sẽ tập trung vào việc sử dụng jQuery cốt lõi để giải quyết các vấn đề của bạn ngay bây giờ. Một khi bạn cảm thấy thoải mái với nó, và với những gì bạn đang làm, bằng mọi cách nhìn vào những thứ như jquery.tmpl. Nhưng nó có lẽ quá mức cần thiết cho những gì bạn cần ngay bây giờ. – Ben

lặp qua mảng JSON trong một danh sách jQuery

Trả lời

Các vấn đề liên quan