Convert dynamic DOM structure to JSON

Question

How can convert below DOM to JSON array which will have many more leafs in thefuture . I have tried a lot but didn't got any solution. I found this but it is not possible in my case.

HTML Code

 <ul id="org1">
        <li>
            Main
            <ul data-self="1">
                <li data-self="2" data-parent="1">A
                    <ul data-self="2">
                        <li data-self="5" data-parent="2">A1</li>
                        <li data-self="6" data-parent="2">A2</li>
                        <li data-self="7" data-parent="2">A3</li>
                        <li data-self="8" data-parent="2">A4</li>
                        <li data-self="9" data-parent="2">A5</li>
                        <li data-self="10" data-parent="2">A6</li>
                    </ul>
                </li>
                <li data-self="3" data-parent="1">B
                    <ul data-self="3">
                        <li data-self="11" data-parent="3">B1</li>
                        <li data-self="12" data-parent="3">B2</li>
                        <li data-self="13" data-parent="3">B3</li>
                        <li data-self="14" data-parent="3">B4</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

JSON Required is

{
  1:{
      2:{5,6,7,8,9,10},
      3:{11,12,13,14} 
    }
}

Script

function recursive(dis)
    {
        $(this).find(' > ul ').each(function(){
                params[$(this).attr('data-self')]=[];
                var i=0;
                $(this).find('li').each(function(){

                     if($(this).has('ul'))
                     {
                        params[$(this).attr('data-parent')][i++]=rec(this);
                     }else
                     {
                        params[$(this).attr('data-parent')][i++]=$(this).attr('data-self');
                     }

                });
            });

    }
recursive('#org1');
console.log(params);

Answer 1

I would prefer something like the following. The 2 changes in the HTML you need to make are:

1) Add a class to your ul such as <ul data-self="2" class="nodes">. 2) Add a class to the wrapper ul such as <ul data-self="1" class="parent">.

var json = {};
$("#org1").find("ul.parent").each(function() {
    
    var $this = $(this);
    json[$this.data("self")] = {};
    var $nodes = $this.find("ul.nodes");
    $nodes.each(function() {
        var children = $(this).find("li").map(function() {
            return $(this).data("self")
        }).get();
        json[$this.data("self")][$(this).data("self")] = children;
    });
});

alert (JSON.stringify(json));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="org1">
    <li>
        Main
        <ul data-self="1" class="parent">
            <li data-self="2" data-parent="1">A
                <ul data-self="2" class="nodes">
                    <li data-self="5" data-parent="2">A1</li>
                    <li data-self="6" data-parent="2">A2</li>
                    <li data-self="7" data-parent="2">A3</li>
                    <li data-self="8" data-parent="2">A4</li>
                    <li data-self="9" data-parent="2">A5</li>
                    <li data-self="10" data-parent="2">A6</li>
                </ul>
            </li>
            <li data-self="3" data-parent="1">B
                <ul data-self="3" class="nodes">
                    <li data-self="11" data-parent="3">B1</li>
                    <li data-self="12" data-parent="3">B2</li>
                    <li data-self="13" data-parent="3">B3</li>
                    <li data-self="14" data-parent="3">B4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>