Как пройти через HTML и преобразовать его в массив объектов? - PullRequest
Новая
       12

Как пройти через HTML и преобразовать его в массив объектов?

1 голос
/ 24 марта 2020

У меня есть следующий HTML код: 

<div class="block" data-type="click">
    <div class="container" data-type="noclick">
        <p>Some text</p>
    </div>
    <div class="container" data-type="noclick">
        <div class="container" data-type="noclick">
            <p data-type="click">More text</p>
        </div>
        <div class="container">
            <p data-type="click">More text</p>
        </div>
    </div>
    ...
        ...
</div>

Существует родительский элемент с именем block, который может содержать любое количество дочерних элементов, из которых также может содержаться любое количество самих дочерних элементов. .

Я использую следующий код для преобразования HTML в JSON выходные данные: 

    site = [];
    ctr = 0;

    $(".block").each(function(){
        site.push([]);
        site[ctr]["type"] = $(this).data("type");
        site[ctr]["class"] = $(this).attr("class");
        site[ctr]["style"] = $(this).attr("style");
        site[ctr]["children"] = [];
            $(this).children().each(function(){
                site[ctr]["children"].push([]);
                site[ctr]["children"]["type"] = $(this).data("type");
                site[ctr]["children"]["class"] = $(this).attr("class");
                site[ctr]["children"]["style"] = $(this).attr("style");
            });
        ctr+=1;
    });

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

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

1 Ответ

0 голосов
/ 24 марта 2020

В полном рабочем примере используется vanilla javascipt и рекурсивная функция : 

function convertToArray(elements) {
    const array = [];
    
    if(!elements || elements.length === 0) {
        return [];
    }    
    
    for(let i=0; i<elements.length; i++) {
        array[i] = {};
        array[i]['class'] = elements[i].getAttribute('class');
        array[i]['type'] = elements[i].getAttribute('data-type');
        array[i]['style'] = elements[i].getAttribute('style');
        array[i]['children'] = convertToArray(elements[i].children);
    }
    return array;
}

const rootElement = document.getElementsByClassName('block');
console.log(convertToArray(rootElement));
<div class="block" data-type="click">
    <div class="container" data-type="noclick">
        <p>Some text</p>
    </div>
    <div class="container" data-type="noclick">
        <div class="container" data-type="noclick">
            <p data-type="click">More text</p>
        </div>
        <div class="container">
            <p data-type="click">More text</p>
        </div>
    </div>
</div>
...