przelotowego JSON tablicy na liście jQuery

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

Chcę go do pętli mojego widoku listy, ale nie mam pojęcia jak to zrobić wszystko, co mogę zrobić tak daleko jest jedna lista przedmiot na raz. Ponadto mogę tylko wymienić produkt, a nie produkt = cenę. Forum jQuery inst pomaga ... dzięki!

Oto reszta kodu

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

i plik 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>

Źródło

2011-06-29 JFFF

Skoro już przy użyciu jQuery, dlaczego nie można użyć $.each() function?

Zamiast tego kodu:

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

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

$(list).append(listItem);

użyj:

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

Źródło

2011-06-29 17:50:41 rockerest

Dzięki. wygląda na to, że może to działać, ale nie mam pojęcia, gdzie umieścić to w moim kodzie lub jak sprawić, by działał z moją listą JQuery. – JFFF

Jestem młodszym programistą i wciąż się uczę ... nago: P – JFFF

@john, zaktualizowałem swoją odpowiedź, aby ** działało ** w twojej sytuacji. – rockerest

Korzystanie z „tablicę JSON” lub lepiej nazwie obiektu JavaScript opisaną poniżej można pętla przez niego za pomocą pętli. lista produktów to obiekt zawierający tablicę, a każdy element w tej tablicy jest obiektem, który zawiera 2 właściwości lub zmienne (opis i cenę). Tablica może być iterowana przy użyciu typowej dla pętli pętli zaczynającej się od 0 i kończącej się na długości tablicy - 1 .... obiekty wewnątrz każdego elementu tablicy mogą być iterowane za pomocą notacji "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"} 
] 
};

Oto przykład iteracji za pomocą obiektu JavaScript.

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

Źródło

2011-06-29 17:46:25

Dzięki za szybką odpowiedź Spróbuję to: D – JFFF

Jeśli używasz już jQuery, trzymałbym się '$ .each', jak powiedzieli inni: o wiele czystsze. – Ben

Wyjazd jQuery.each()

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

Źródło

2011-06-29 17:49:52 fehays

I wydaje mi się, że to, czego naprawdę potrzebujesz to .tmpl plugin do budowania listy z danych json:

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

Źródło

2011-06-29 17:50:58 ShaneBlake

Sprawdzę to, dzięki! – JFFF

@JFFF biorąc pod uwagę, że dopiero zaczynasz, skupiłbym się na używaniu core jQuery, aby rozwiązać twoje problemy na teraz. Kiedy już się z tym dobrze czujesz, i tym, co robisz, spójrz na takie rzeczy jak jquery.tmpl. Ale to chyba przesada dla tego, czego potrzebujesz teraz. – Ben

przelotowego JSON tablicy na liście jQuery

Odpowiedz

Powiązane problemy