bucle a través de matriz JSON en una lista jQuery

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

lo quiero colocar a través de mi lista de vista, pero no tienen idea de cómo hacer esto todo lo que puedo hacer hasta ahora es la lista de uno artículo a la vez. Además, solo puedo enumerar el producto y no el producto = el precio. El foro de jQuery inst ayuda ... ¡gracias!

Aquí está el resto del código

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

y el archivo 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>

Fuente

2011-06-29 JFFF

Puesto que usted ya está usando jQuery, ¿por qué no utilizar la $.each() function?

En lugar de este código:

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

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

$(list).append(listItem);

Utilice esta:

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

Fuente

2011-06-29 17:50:41 rockerest

Gracias. parece que podría funcionar, pero no tengo idea de dónde poner esto en mi código o cómo hacerlo funcionar con mi lista de JQuery. – JFFF

Soy un programador junior y sigo aprendiendo ... Desnudo conmigo: P – JFFF

@john, he actualizado mi respuesta para que ** funcione ** con su situación – rockerest

Uso de la "matriz JSON" o un objeto JavaScript mejor llamado describe a continuación puede recorrer utilizando los bucles. lista de productos es un objeto que contiene una matriz y cada elemento de esta matriz es un objeto que contiene 2 propiedades o variables (descripción y precio). Sin embargo, la matriz se puede iterar usando un bucle for típico que comienza en 0 y termina en la longitud de la matriz - 1 .... los objetos dentro de cada elemento de la matriz se pueden iterar utilizando la notación "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"} 
] 
};

Aquí hay un ejemplo de iteración a través de su objeto Javascript.

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

Fuente

2011-06-29 17:46:25

Gracias por la respuesta rápida lo intentaré: D – JFFF

Si ya está usando jQuery, me quedaría con '$ .each' como han dicho otros: mucho más limpio. – Ben

Salida jQuery.each()

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

Fuente

2011-06-29 17:49:52 fehays

Me parece a mí que lo que realmente necesita es la .tmpl plugin para construir su lista de sus datos JSON:

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

Fuente

2011-06-29 17:50:58 ShaneBlake

Lo verifico, gracias! – JFFF

@JFFF, dado que recién está comenzando, me concentraría en usar core jQuery para resolver sus problemas por el momento. Una vez que te sientas cómodo con él, y con lo que estás haciendo, mira todos los aspectos como jquery.tmpl. Pero probablemente sea exagerado para lo que necesita en este momento. – Ben

bucle a través de matriz JSON en una lista jQuery

Respuesta

Cuestiones relacionadas