Блог

Если у меня есть список, подобный следующему:

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

Как я могу преобразовать это в объект json следующим образом:

[{«id»: «1», «title»: «Bob»}, {«id»:»2″,»title»: «Frank»}, {«id»: «3»,»title»: «Frank»}]

Мне нужно перевести эти данные в этот формат, чтобы я мог затем передать их в обратном вызове $.post() моему php-серверу.

Может кто-нибудь сказать мне, как получить элементы из этого списка и преобразовать их в приведенный выше json с помощью jQuery?

В jQuery действительно есть что-то встроенное для построения массива: map()

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

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

  return item;
});
  

Это приведет к созданию массива объектов, соответствующих нужной вам структуре JSON. Затем, чтобы сериализовать это в формате JSON, используйте JSON.stringify, который встроен в новые браузеры и доступен для старых, включая json2.js:

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

Также имейте в виду, что $.post() автоматически сериализует параметр данных объекта, как key1=значение1amp;key2=значение2 amp; и т.д. Если вам строго не нужен JSON на стороне сервера, этап сериализации JSON может быть необязательным.

 var items = [];

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

Вы можете просто поместить их в объект JSON, вот как —

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

И, конечно, ваш html

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

Рабочий пример — http://jsfiddle.net/mohammadwali/tkhb5 /

Надеюсь, это помогло!