Как сделать ассоциативный массив JQuery из неупорядоченного списка HTML

Question

В настоящее время в моем скрипте JQuery у меня есть жестко закодированный массив:

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

Вместо того, чтобы этот массив был жестко запрограммирован в моем скрипте, мне нужно создать его динамически из набора неупорядоченных списков HTML, сгенерированных из системы, чтобы разметка была:

<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>

и т.д ....

Мне понадобится:

var arrayList = new Array (который был создан)

Как я могу сделать это так, чтобы был создан новый объект массива, и он не просто видел вывод в виде текстовой строки?

Answer 1

Во-первых, для большей гибкости, я бы предложил вам изменить вашу разметку, чтобы хранить ключи элементов списка в атрибутах data:

<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>

Оттуда вы можете использовать map () чтобы построить ваши объекты:

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

Вы можете увидеть результаты в этой скрипке .

Answer 2

Попробуйте это.

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 будет содержать массив ваших ассоциативных объектов, а DTO будет содержать строку JSON этого массива.
Выберите то, что вам нужно.

Демо: http://jsfiddle.net/naveen/yA54G/

P.S: Пожалуйста, добавьте ссылку на json2.js для браузеров, которые не поддерживают JSON (если вы используете JSON.stringify)