JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="ulid">
    <li data-id="111" data-sub="0" data-url="home" data-active="1">Home</li>
    <li data-id="222" data-sub="0" data-url="about" data-active="1">About</li>
    <li data-id="333" data-sub="1" data-url="news" data-active="1">News
        <ul>
            <li data-id="444" data-sub="0" data-url="news/latest" data-active="1">Latest</li>
            <li data-id="555" data-sub="0" data-url="news/reports" data-active="1">Reports</li>
        </ul>
    </li>
</ul>

JavaScript

var mynav = [];
    $("#ulid").children("li").each(function () {
        var that = this;
          if($(that).children("ul").length) {
              var temp = [];
              $(that).children("ul").find("li").each(function(){
                  temp.push($(this).data());
              });
              console.log(temp);
              $(that).data().child = temp;
       }
        console.log($(that).data());
        mynav.push($(that).data());
    });
    mynav = JSON.stringify(mynav, null, 4);
$('body').html('<pre>' + mynav + '</pre>');