JavaScript: How to create nested array from string

Question

I have the following code and I need to create a nested array from which, I will generate a multilevel ordered list.

var htmlContent2 = '<div id="header"><p class="headpara">Header content</p><p class="one">Lorem ipsum dolor sit amet, consectetur:</p><p class="two">Perferendis iure doloremque iusto adipisci facilis.</p><p class="two">Asperiores impedit officiis cumque molestias at rerum consequuntur!</p><p class="one">More dummy text.</p> <p class="two">Additional dummy text: </p> <p class="three">Asperiores impedit officiis.</p> <p class="three">Lolestiae asperiores ad repellat est obcaecati.</p> <p class="two">Lorem ipsum dolor sit amet.</p> <p class="notelem">Dignissimos maiores facere consequuntur quod.</p> <p class="one">Ea  excepturi aperiam.</p></div>';

var $ = cheerio.load(htmlContent2);
var allList = [];
var manipulatedContent = $('#header').each(function (i, elem) {
    var level1 = [],
        level2 = [],
        level3 = [],
        level4 = [],        
        item1 = $('.one').html(),
        item2 = $('.two').html(),
        item3 = $('.three').html(),
        item4 = $('.notelem').html();
    level1[i] = item1;
    level2[i] = item2;
    level3[i] = item3;
    level4[i] = item4;
    allList.push(item1, [item2, [item3, item4]]);

});
console.dir(allList);

With my current code I can only produce the following array:

[ 'Lorem ipsum dolor sit amet, consectetur:',
  [ 'Perferendis iure doloremque iusto adipisci facilis.',
    [ 'Asperiores impedit officiis.',
            'Dignissimos maiores facere consequuntur quod.']]]

But the desired result array:

['Lorem ipsum dolor sit amet, consectetur:',
    ['Perferendis iure doloremque iusto adipisci facilis.',
        ['Asperiores impedit officiis.',
            ['Dignissimos maiores facere consequuntur quod.']]]];

How can I achieve this using JavaScript or any better method with cheerio.js?

My objective is to create a nested ordered list from a poorly formatted html as shown in the sample content (htmlContent2).

Your help will be very much appreciated.

Answer 1

As @Chris G commented:

//var htmlContent2 = '';
//var $ = cheerio.load(htmlContent2);
var allList = [];
var manipulatedContent = $('#header').each(function (i, elem) {
    var level1 = [],
        level2 = [],
        level3 = [],
        level4 = [],        
        item1 = $('.one').html(),
        item2 = $('.two').html(),
        item3 = $('.three').html(),
        item4 = $('.notelem').html();
    level1[i] = item1;
    level2[i] = item2;
    level3[i] = item3;
    level4[i] = item4;
    allList.push(item1, [item2, [item3, [item4]]]);

});
console.dir(allList);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"><p class="headpara">Header content</p><p class="one">Lorem ipsum dolor sit amet, consectetur:</p><p class="two">Perferendis iure doloremque iusto adipisci facilis.</p><p class="two">Asperiores impedit officiis cumque molestias at rerum consequuntur!</p><p class="one">More dummy text.</p> <p class="two">Additional dummy text: </p> <p class="three">Asperiores impedit officiis.</p> <p class="three">Lolestiae asperiores ad repellat est obcaecati.</p> <p class="two">Lorem ipsum dolor sit amet.</p> <p class="notelem">Dignissimos maiores facere consequuntur quod.</p> <p class="one">Ea  excepturi aperiam.</p></div>