mymotherland mymotherland - 7 months ago 5
Javascript Question

Javascript generate recursive JSON object from nested UL LI check box

I have situation to generate JSON object as like below structure from nested UL LI checkbox when it is checked/uncheck.



<ul class="tree" id="tree">

<li><input type="checkbox" name="Team1" value="Team1" checked="checked">Team1 <!-- AND SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="one" value="Team1 child1" checked="checked">Team1 child1</li>
<li><input type="checkbox" name="two" value="Team1 child2">Team1 child2</li>
<li><input type="checkbox" name="three" value="Team1 child3" checked="checked">Team1 child3 <!-- SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="four" value="Team1 child3 - child1" checked="checked">Team1 child3 - child1</li>
<li><input type="checkbox" name="five" value="Team1 child3 - child2">Team1 child3 - child2</li> <!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>

<li><input type="checkbox" name="six" value="Team2">Team2</li>

<li><input type="checkbox" name="seven" value="Team3" checked="checked">Team3
<ul>
<li><input type="checkbox" name="eight" value="Team3 child1">Team3 child1</li>
<li><input type="checkbox" name="nine" value="Team3 child2" checked="checked">Team3 child2
<ul>
<li><input type="checkbox" name="ten" value="Team3 child2 - child1" checked="checked">Team3 child2 - child1</li>
<li><input type="checkbox" name="eleven" value="Team3 child2 - child2" checked="checked">Team3 child2 - child2</li>
</ul>
</li>
</ul>
</li>

</ul>





JSON Structure should be like below,

{
"Team" : [
{
"name" : "Team1",
"child" : [
{
"name" : "Team1 child1",
},
{
"name" : "Team1 child3",
"child" :[
{
"name" : "Team1 child3- child1",
}
]
}
]
},
{
"name" : "Team3",
"child" : [
{
"name" : "Team3 child2",
"child" :[
{
"name" : "Team3 child2- child1",
},
{
"name" : "Team3 child2- child2",
}
]
}
]
}
]
}


Tried with solution which is completely mess. Please advise for better solution.

Answer

You can do it with recursion

function createJSON($ul) {
  return $ul
    .children() // get all children (li)
    .filter(function() { // filter li which have checked checkbox
      return $(this).children(':checkbox')[0].checked; // get children checkbox is checked
    })
    .map(function() { // now generate array using map()
      var obj1 = {}; 
      obj1.name = $.trim($(this).contents().filter(function() { // get text content and trim to avoid spaces
        return this.nodeType === 3 && $.trim(this.textContent).length > 0 // check text node and empty string
      }).text());
      var $ulc = $(this).children('ul'); // get inner children
      if ($ulc.length > 0) // if it have children , use recursion and do the same
        obj1.child = createJSON($ulc); // recursion
      return obj1;
    }).get(); // get the result array
}
$(':checkbox').change(function() {
  $('#res').html(JSON.stringify(createJSON($('#tree')), null, 3))
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="res"></pre>

<ul class="tree" id="tree">

  <li>
    <input type="checkbox" name="account_settings" value="yes" checked="checked">Team1
    <!-- AND SHOULD CHECK HERE -->
    <ul>
      <li>
        <input type="checkbox" name="one" value="one" checked="checked">Team1 child1</li>
      <li>
        <input type="checkbox" name="two" value="two">Team1 child2</li>
      <li>
        <input type="checkbox" name="user_roles" value="user_roles">Team1 child3
        <!-- SHOULD CHECK HERE -->
        <ul>
          <li>
            <input type="checkbox" name="user_role" value="add" checked="checked">Team1 child3 - child1</li>
          <li>
            <input type="checkbox" name="user_role" value="delete">Team1 child3 - child2</li>
          <!-- CHECK HERE -->
        </ul>
      </li>
    </ul>
  </li>

  <li>
    <input type="checkbox" name="rl_module" value="yes">Team2</li>

  <li>
    <input type="checkbox" name="rl_module" value="yes" checked="checked">Team3
    <ul>
      <li>
        <input type="checkbox" name="vat" value="yes">Team3 child1</li>
      <li>
        <input type="checkbox" name="bank_account" value="yes">Team3 child2
        <ul>
          <li>
            <input type="checkbox" name="view" value="yes" checked="checked">Team3 child2 - child1</li>
          <li>
            <input type="checkbox" name="crud" value="yes" checked="checked">Team3 child2 - child2</li>
        </ul>
      </li>
    </ul>
  </li>

</ul>

Comments