¿Cómo convierto los elementos de un LI en un objeto json utilizando jquery?

Question

Si tengo una lista como la siguiente:

<ul class="nameList"> 
    <li value="1">Bob</li> 
    <li value="2">Frank</li> 
    <li value="3">Sally</li> 
</ul> 

¿Cómo puedo convertir eso en un objeto JSON de este modo:

[{ "id": "1", "title": "Bob"}, { "id": "2", "title": "Frank"}, { "id": "3", "title": "Frank"}]

I Necesito obtener esa información en ese formato para poder pasarla en una llamada $ .post() a mi servidor php.

Puede alguien decirme cómo conseguir los artículos de esa lista y convertirlos en el JSON anterior utilizando jQuery?

Answer 1

Uso JQuery serialize list.

Answer 2

var items = []; 

$('ul.nameList').children().each(function() { 
    var $this = $(this); 
    var item = { id: $this.attr('value'), title: $this.html() }; 
    items.push(item); 
}); 

Answer 3

jQuery en realidad tiene algo incorporado para la construcción de la matriz: map()

var items = $('.nameList').find('li').map(function() { 
    var item = { }; 

    item.id = this.value; 
    item.title = $(this).text(); 

    return item; 
}); 

que va a construir una matriz de objetos que concuerden con la estructura JSON que está buscando. Luego, a JSON serializar que, utilice JSON.stringify que está integrado en los nuevos navegadores y está disponible para los mayores mediante la inclusión de json2.js:

// Produces [{'id':1,'title':'bob'},{etc},{etc}] 
var json = JSON.stringify(items); 

También hay que tener en cuenta que $ .post() serializa automáticamente un parámetro de datos de objetos, como clave1 = valor1 & clave2 = valor2 & etc. a menos que estrictamente necesita JSON en el lado del servidor, el paso de la serialización JSON puede no ser necesario.

Answer 4

Usted puede simplemente empujar éstos a un objeto JSON, aquí es cómo -

// create a blank array 
    var mylist = []; 

    // loop trough the li 
    $("ul.nameList > li").each(function() {  
    //push element data to the array 
     mylist.push({ 
      "id": $(this).attr("value"), 
      "title": $(this).text() 
     }); 
    }) 

    // then you can simply pass it to the post method 
    $.post("myhandler.php", { list: mylist }, function (data) { 
     // recived data 
    }) 

Y por supuesto el de su html

<ul class="nameList"> 
    <li value="1">Bob</li> 
    <li value="2">Frank</li> 
    <li value="3">Sally</li> 
</ul> 

Ejemplo de trabajo - http://jsfiddle.net/mohammadwali/tkhb5/

¡Espero que esto haya sido de ayuda!