JSFiddle - React, Tailwind, and code Playground
HTML
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<ul id="Menu">
<li>Menu
<ul>
<li>Test 1</li>
<li>Test 2
<ul>
<li>Sub test 2/1</li>
<li>Sub test 2/2</li>
<li>Sub test 2/3</li>
</ul>
</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li>Menu2</li>
</ul>
JavaScript
var menu = [];
$(document).ready(function(){
item = {};
buildMenu($('#Menu'), item);
menu.push(item);
console.log(menu);
});
function buildMenu(ul, item){
var children = [];
ul.children('li').each(function(){
var current = $(this);
if(current.children('ul').length > 0){
var newItem = {};
buildMenu(current.children('ul'), newItem);
children.push(newItem);
}else{
children.push(current.text());
}
});
var txt = ul.parent().html();
txt = txt.replace(/\<ul.*[\s\S]*\<\/ul\>/g,"").trim();
console.log(txt);
item[txt] = children;
}