How Do I Convert The Items Of An LI Into A Json Object Using Jquery?

If I have a list like the following:

• Bob
• Frank
• Sally

  Solution 1:

  jQuery actually has something built-in for building the array: map()

  var items = $('.nameList').find('li').map(function() {
    var item = { };
  
    item.id = this.value;
    item.title = $(this).text();
  
    return item;
  });
  

  That will build an array of objects matching the JSON structure you're after. Then, to JSON serialize that, use JSON.stringify which is built into newer browsers and available for older ones by including json2.js:

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

  Also keep in mind that $.post() automatically serializes an object data parameter, as key1=value1&key2=value2&etc. Unless you strictly need JSON on the server-side, the JSON serialization step may not be necessary.

  
  

  Solution 2:

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

  
  

  Solution 3:

  
  You can simply push these to a JSON object, Here is how -
  

     // 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
     })
  

  And of course the your html

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

  Working example - http://jsfiddle.net/mohammadwali/tkhb5/

  Hope this helped!

  
  

Share