JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentLeft">


<ul id="sitemap"> 
<li id="page_1" class="page_container">Test
    <ul>
        <li id="page_20">Nested one
            <ul>
                <li id="page_x1">Nested one</li>
                <li id="page_x2">nested 2</li>
                <li id="page_x3"> Nested 6</li>
            </ul>            
        </li>
        <li id="page_30">nested 2</li>
        <li id="page_40"> Nested 6</li>
    </ul>
</li> 
<li id="page_4" class="page_container">Test
    <ul></ul>
</li> 
<li id="page_5" class="page_container">Test</li> 
</ul>
</div>
<pre id="log"></pre>

CSS

#log {color:green}
#pre {color:#666;}

JavaScript

function serializeUL(ul){
		var children = {},
            li = $(ul).children();
        if (li.length == 0) return null;
		li.each(function(){
			var li = $(this)
				sub = li.children('ul')
			children[this.id] = sub.length > 0  ? serializeUL(sub) : null;
		})
		return children;
	}
var result = serializeUL('#sitemap');
$('#log').html(JSON.stringify(result, null, 4));