¿Cómo hacer un arreglo asociativo jQuery de una lista desordenada HTML

Question

Actualmente en mi script jQuery Tengo una red codificada duro:

var arrayList = [ 
    {"id":"1","category":"foo1","title":"bar1","image":"images/foobar1.gif"}, 
    {"id":"2","category":"foo2","title":"bar2","image":"images/foobar2.gif"}, 
    etc.... 
]; 

En lugar de esa matriz son difíciles codificado en mi guión que necesita para crear esa dinámica de un conjunto de listas desordenadas HTML que se genera a partir del sistema por lo que el margen de beneficio sería:

<ul> 
    <li>1</li> 
    <li>foo1</li> 
    <li>bar1</li> 
    <li>images/foobar1.gif</li> 
</ul> 

<ul> 
    <li>2</li> 
    <li>foo2</li> 
    <li>bar2</li> 
    <li>images/foobar2.gif</li> 
</ul> 

etc ....

que iba a necesitar:

var arrayList = new Array (que se ha creado)

¿Cómo puedo hacer esto de manera que se crea un nuevo objeto de matriz y no se limita a ver la salida como una cadena de texto?

Answer 1

Pruebe esto.

var items = []; 
$("ul").each(function(){ 
    var item = {}; 
    var lis = $(this).find("li"); 
    item.id = lis.get(0).innerHTML; 
    item.category = lis.get(1).innerHTML; 
    item.title = lis.get(2).innerHTML; 
    item.image = lis.get(3).innerHTML; 
    items.push(item); 
}); 

var DTO = JSON.stringify(items); 

items llevará a cabo la selección de los objetos asociativos y DTO llevará a cabo la cadena JSON de esa matriz.
Elija lo que necesite.

Demostración: http://jsfiddle.net/naveen/yA54G/

PD: Por favor, añada una referencia a json2.js para los navegadores que no tienen soporte de JSON (si se utiliza) JSON.stringify

Answer 2

En primer lugar, una mayor flexibilidad, me gustaría sugerir que modifique su margen de beneficio para almacenar las claves de elementos de lista en data atributos:

<ul> 
    <li data-key="id">1</li> 
    <li data-key="category">foo1</li> 
    <li data-key="title">bar1</li> 
    <li data-key="image">images/foobar1.gif</li> 
</ul> 

<ul> 
    <li data-key="id">2</li> 
    <li data-key="category">foo2</li> 
    <li data-key="title">bar2</li> 
    <li data-key="image">images/foobar2.gif</li> 
</ul> 

a partir de ahí, se puede utilizar map() para construir sus objetos:

var arrayList = $("ul").map(function() { 
    var obj = {}; 
    $("li", this).each(function() { 
     var $this = $(this); 
     obj[$this.data("key")] = $this.text(); 
    }); 
    return obj; 
}).get(); 

Puede ver los resultados en this fiddle.