Как мне преобразовать элементы LI в объект json, используя jquery?

Question

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

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

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

[{ "ID": "1", "название": "Боб"}, { "ID": "2", "название": "Франк"}, { "ID": "3", "название": "Франк"}]

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

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

Answer 1

В 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 = value1 & key2 = value2 & etc. Если вам не нужен JSON на стороне сервера, шаг сериализации JSON может не потребоваться.

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

Вы можете просто вставить их в объект 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/

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