Create valid JSON from the id’s of LI’s in an unordered list

I’m trying to create valid JSON from the id’s of li’s in a nested unordered list: e.g here is an example list

<ul class="list">
            <li id="p1">1234</li>
            <li id="p2">1234
                <ul>
                    <li id="s1">sdfg</li>
                    <li id="s2">sdfg
                        <ul>
                            <li id="sq1">sdfg</li>
                            <li id="sq2">sdfg</li>
                        </ul>
                    </li>
                </ul>   
            </li>
            <li id="p6">1234</li>
            <li id="p8">1234</li>
</ul>

The JSON should read something like this:

[
    {
        "item": "p1"
    },
    {
        "item": "p2",
        "data": [
            {
                "item": "s1"
            },
            {
                "item": "s2",
                "data": [
                    {
                        "item": "sq1"
                    },
                    {
                        "item": "sq2"
                    }
                ]
            }
        ]
    },
    {
        "item": "p6"
    },
    {
        "item": "p8"
    }
]

I’m trying to create it like this:

let $arr = []
document.querySelectorAll("ul.list li").forEach($li=>{  
if( $li.querySelector("ul:first-of-type") ){
let $data = [];
$li.querySelectorAll("ul:first-of-type li").forEach($li1=>{
data.push(  {"item":$li1.id })
})
$arr.push( { "item":$li.id,"data":$data } )
} else {
$arr.push( { "item":$li.id } )
}           
})

But it’s not creating the correct JSON – any clues / help that creates the correct JSON much appreciated thanks in advance