JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<ul class="objectRoot">
    <li>Item A
        <ul>
            <li>Item A1</li>
            <li>Item A2</li>
        </ul>
    </li>
    <li>Item B
        <ul>
            <li>Item B1</li>
            <li>Item B2</li>
            <li>Item B3</li>
        </ul>
    </li>
</ul>

JavaScript

$.fn.nodeText = function () {
    return $(this).contents().filter(function () {
        return this.nodeType == 3;
    })[0].nodeValue
}
var objectArray = [];

function makeObjectMap(object, isInner) {
    console.log(object);
    var title = object.nodeText();
    var objectItem = {};
    if (isInner) objectItem['title'] = title;
    else objectItem['submenu'] = title;
    object.each(function (index, inner) {
        objectItem['submenu'].push(inner.nodeText())
        var innerObj inner.children('ul').children('li')
        if (innerObj.length > 0) return makeObjectMap($('.objectRoot'), true);
        else return objectItem;
    });
}

makeObjectMap($('.objectRoot').children('li'), false);