get all parent id <ul> to array

Question

My html code :

<form>
<ol>
  <li id="1" name="grandparent">Grand Parent
    <ol>
      <li id="2" name="parent">Parent
         <ol>
           <li id="3" name="child">Child
         </ol>
      </li>
      <li id="4" name="parent2">Parent2
         <ol>
           <li id="5" name="child2">Child2
         </ol>
      </li>
    </ol>
  </li>
  <li id="6" name="grandparent2">Grand Parent 2
  </li>
</ol>
</form>

On submit form, I want to get all parent like this :

[1] => 'grandparent', Parent

[2//li id] => 'parent', Parent => [1//id of parent]

[3] => 'child', Parent => [2]

[4] => 'parent2', Parent => [1]

[5] => 'child2', Parent => [4]

[6] => 'grandparent2', Parent

Please help me to get all parent id on javascript.

Answer 1

You expect somethig like this. I use recursive function hence you can extend this very easily,

function getJson()
{
	var finalJson = getChildLis(new Array(),$("#myform").children("ol"),"");
	alert(JSON.stringify(finalJson));
}


function getChildLis(jsonArray,currentEle,parent)
{
	$.each($(currentEle).children("li"),function(key,val){
		var curName = $(val).attr("name");
		var curId = $(val).attr("id");
		var jsonO = {};		
		jsonO[curId] = curName;
		jsonO.parent = parent;		
		jsonArray.push(jsonO);
		getChildLis(jsonArray,$(val).find("ol"),curId);
	});
	return jsonArray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form id="myform" >
<ol>
  <li id="1" name="grandparent">Grand Parent
    <ol>
      <li id="2" name="parent">Parent
         <ol>
           <li id="3" name="child">Child
         </ol>
      </li>
      <li id="4" name="parent2">Parent2
         <ol>
           <li id="5" name="child2">Child2
         </ol>
      </li>
    </ol>
  </li>
  <li id="6" name="grandparent2">Grand Parent 2
  </li>
</ol>
<input type="button" value="show Array" onclick="getJson()" >
</form>