Как создать вложенный объект json из вложенного списка с помощью javascript / jquery

Question

Я хотел бы создать следующий объект:

var ideaBoard = {
     "Staff Retreat" : {
         "Games" : [
             {"title" : "Rockband", "details" : "1hr"},
             {"title" : "Texas Hold em", "details" : "30min"}
         ],
         "Talks" : [
             {"title" : "The Old You", "details" : "Dr. Smith"}
         ]
     }
}

из следующего HTML:

<div id="data">
    <ul><span class="board-title">Staff Retreat</span>
        <li><span class="category-title">Games</span>
            <ul>
                <li>
                    <span class="title">Rockband</span>
                    <span class="details">1hr</span>
                </li>
                <li>
                    <span class="title">Texas Hold em</span>
                    <span class="details">30min</span>
                </li>
            </ul>
        </li>
        <li><span class="category-title">Talks</span>
            <ul>
                <li>
                    <span class="title">The Old You</span>
                    <span class="details">Dr. Smith</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

Я новичок в циклах / массивах / объектах - поэтому я очень ценю помощь!

Я использую jQuery в другом месте этого проекта, если это поможет.

Спасибо!

Answer 1

Есть несколько способов.Вот один из них:

var ideaBoard = {}
$('#data > ul').each(function() {
   var data = {}, // board data
       title = $(this).find('.board-title').text(); // board title

   // find categories
   $(this).find('> li > .category-title').each(function() {
        var category = $(this).text(), // category title

        // we can use map to create the array
        var category_data = $(this).next().children('li').map(function() {
            var tdata = {};

            // each span contains detailed data
            $(this).children('span').each(function() {
                tdata[this.className] = $(this).text();
            });

            return tdata;
        }).get();

        data[category] = category_data;
   });

  ideaBoard[title] = data;
});

DEMO

Это, скорее всего, сломается, если вы измените структуру HTML.Если у вас много таких данных, этот код также может быть довольно медленным.

Чтобы узнать об используемых методах, взгляните на документацию jQuery .

Answer 2

Как вы генерируете HTML?Если вы используете PHP, вы можете просто передать переменные в JS, а не пытаться прочитать их позже из HTML.Например, если они у вас есть в массиве, вы можете использовать json_encode в PHP, а затем повторить это на своей странице внутри переменных = jQuery.parseJSON (здесь);

Теперь, если вы не можете это сделать, и вы действительно хотите прочитатьэто из HTML, затем вы должны сначала выбрать данные id с помощью $ ('# data') и взять его дочерние элементы ().Затем используйте .each () для детей.Затем поместите дочерний объект в объект, а затем проверьте каждый дочерний элемент () с помощью .each () и добавьте их в свой объект.Если у вас может быть больше, чем просто эти уровни, я рекомендую сделать для этого рекурсивную функцию.

PS: я не думаю, что это правильный HTML, чтобы поместить Span между UL и LI.

Answer 3

Не оптимизировано, но работает:

var result = {};
var node1;
var node2;
var node3;
var tmpObj = {};
$('#data > ul').each(function() {
    node1 = $(this);
    result[node1.find('.board-title').text()] = {};
    node1.find('.category-title').each(function() {
        node2 = $(this);
        result[node1.find('.board-title').text()][node2.text()] = [];
        node2.next('ul').children('li').each(function() {
            node3 = $(this);
            tmpObj = {};
            node3.children('span').each(function() {
                tmpObj[$(this).attr('class')] = $(this).text();
            });
            result[node1.find('.board-title').text()][node2.text()].push(tmpObj);
        })
    });
});
console.log(result);