Multi-dimensional array or json object from nested list item in JS
<p>I've a nested list items. I want to make an multi-dimensional array or json object from the list items. I've tried something like below. But I'm not getting the expected output.</p>

<blockquote>
  <p>The depth of the list item can be more. So, I'll define a recursive method to do this later. </p>
</blockquote>

<p><a href="https://jsfiddle.net/shawon922/Lu85g8rL/27/" rel="nofollow noreferrer">DEMO Fiddle</a></p>

<p>HTML:</p>

<pre><code>&lt;div class="dd" id="nestable"&gt;
    &lt;ol class="dd-list"&gt;
        &lt;li class="dd-item" data-id="1"&gt;
            &lt;div class="dd-handle"&gt;Sub-indicator 1&lt;/div&gt;
            &lt;ol class="dd-list"&gt;
                &lt;li class="dd-item" data-id="2"&gt;                    
                    &lt;div class="dd-handle"&gt;Sub-indicator 2&lt;/div&gt;
                    &lt;ol class="dd-list"&gt;
                        &lt;li class="dd-item" data-id="3"&gt;

                            &lt;div class="dd-handle"&gt;Sub-indicator 3&lt;/div&gt;
                            &lt;ol class="dd-list"&gt;
                                &lt;li class="dd-item" data-id="4"&gt;

                                    &lt;div class="dd-handle"&gt;Sub-indicator 4&lt;/div&gt;
                                &lt;/li&gt;
                            &lt;/ol&gt;
                        &lt;/li&gt;
                    &lt;/ol&gt;
                &lt;/li&gt;
                &lt;li class="dd-item" data-id="3"&gt;

                            &lt;div class="dd-handle"&gt;Sub-indicator 3&lt;/div&gt;
                            &lt;ol class="dd-list"&gt;
                                &lt;li class="dd-item" data-id="4"&gt;

                                    &lt;div class="dd-handle"&gt;Sub-indicator 4&lt;/div&gt;
                                &lt;/li&gt;
                            &lt;/ol&gt;
                        &lt;/li&gt;
            &lt;/ol&gt;
        &lt;/li&gt;
    &lt;/ol&gt;
&lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>var subIndicTreeObj = {};
var tempObj = [];
var parentId = 0;
var parentId1 = 0;
var parentId2 = 0;

$('#nestable &gt; ol &gt; li').each(function(index, value) { 
    parentId = 0;
    parentId1 = 0;
    parentId2 = 0;

    tempObj.push({'sub_indic_id': $(this).attr('data-id'), 'parent_id': parentId});


    if ($(this).has('ol').length &gt; 0) { 

        parentId = $(this).attr('data-id');

        $(this).find('ol &gt; li').each(function(index1, value1) { 

            tempObj.push({'sub_indic_id': $(this).attr('data-id'), 'parent_id': parentId});


            if ($(this).has('ol').length &gt; 0) {  

                parentId1 = $(this).attr('data-id');

                $(this).find('ol &gt; li').each(function(index2, value2) { 

                    tempObj.push({'sub_indic_id': $(this).attr('data-id'), 'parent_id': parentId1});

                    if ($(this).has('ol').length &gt; 0) { 


                        parentId2 = $(this).attr('data-id');

                        $(this).find('ol &gt; li').each(function(index3, value3) { 

                            tempObj.push({'sub_indic_id': $(this).attr('data-id'), 'parent_id': parentId2});

                        });
                    }

                });
            } 
        });
    } 
});

subIndicTreeObj = tempObj;

console.log(subIndicTreeObj);
</code></pre>

<p>Current Output: </p>

<pre><code> [
  Object{
    sub_indic_id="1",
    parent_id=0
  },
  Object{
    sub_indic_id="2",
    parent_id="1"
  },
  Object{
    sub_indic_id="3",
    parent_id="2"
  },
  Object{
    sub_indic_id="4",
    parent_id="3"
  },
  Object{
    sub_indic_id="4",
    parent_id="2"
  },
  Object{
    sub_indic_id="3",
    parent_id="1"
  },
  Object{
    sub_indic_id="4",
    parent_id="3"
  },
  Object{
    sub_indic_id="4",
    parent_id="1"
  },
  Object{
    sub_indic_id="3",
    parent_id="1"
  },
  Object{
    sub_indic_id="4",
    parent_id="3"
  },
  Object{
    sub_indic_id="4",
    parent_id="1"
  }
]
</code></pre>

<p>I want the immediate parent_id of a child. But I'm getting the top level parent_id for some list item. Such as,</p>

<pre><code>Object{
    sub_indic_id="4",
    parent_id="1"
  }
</code></pre>

<p>Can anybody help to find out the problem ? Thanks in advance.</p>