CODEWITHSUNDEEP
javascriptjquery
Aminul hasan
Aminul hasan

Reputation: 33

How to create subemenu item as ul in list item via javascript?

I am, trying to get list item from JSON and make that menu item. Now I am getting menu item but can not manage to make as it should be. all the items I am getting as list item.

<ul id="demo"></ul>
<script>
  var text, i, j, t, x = "";

  var text = dmAPI.getNavItems();

  for (i in text) {

    if (text[i].inNavigation === true ) {
      x += '<li><a href="'+text[i].path+'">' + text[i].title + '</a>'

      if ( 'subNav' in text[i] ) {
        for (j in text[i].subNav) {
          x+='<li class="submenuitem"><a href="'+text[i].subNav[j].path +'">' + text[i].subNav[j].title + '</a>'

          for ( t in text[i].subNav[j].subNav) {
            x+='<li class="sub_submenuitem"><a href="'+text[i].subNav[j].subNav[t].path +'">' + text[i].subNav[j].subNav[t].title + '</a></li>';
          }

          '</li>';
        }

      }

      '</li>';
    } //end if

  }// end for

  document.getElementById("demo").innerHTML = x;  
<script>

Right now this code output like this.... 

<ul id="demo">
  <li><a href="#">New Page</a></li>
  <li class="submenuitem"><a href="#">New Page</a></li>
  <li class="sub_submenuitem"><a href="#">New Page</a></li>
  <li class="sub_submenuitem"><a href="#">New Page</a></li>
  <li><a href="#">Features</a></li>
</ul>

But I want output like this.....

<ul id="demo">
  <li>
    <a href="#">New Page</a>
    <ul>
      <li class="submenuitem">
        <a href="#">New Page</a>
        <ul>
          <li class="sub_submenuitem"><a href="#">New Page</a></li>
          <li class="sub_submenuitem"><a href="#">New Page</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a></li>
</ul>

How can I do this?

Upvotes: 0

Views: 64

Answers (2)

maximelian1986
maximelian1986

Reputation: 2452

Just add inner ul element where you need it

<ul id="demo"></ul>
<script>
var text, i, j, t, x = "";

var text = dmAPI.getNavItems();

for (i in text) {

if (text[i].inNavigation === true ) {
    x += '<li><a href="'+text[i].path+'">' + text[i].title + '</a>'

    if ( 'subNav' in text[i] ) {
        for (j in text[i].subNav) {

        x+='<li class="submenuitem"><a href="'+text[i].subNav[j].path +'">' + 
text[i].subNav[j].title + '</a>'

        for ( t in text[i].subNav[j].subNav) {
        x+='<ul>' //<--this
        x+='<li class="sub_submenuitem"><a href="'+text[i].subNav[j].subNav[t].path 
        +'">' + text[i].subNav[j].subNav[t].title + '</a></li>';
        x+='</ul>' //<--and this
      }

        '</li>';
    }

    }

   '</li>';
} //end if

}// end for

document.getElementById("demo").innerHTML = x;

<script>

Upvotes: 0

Ansar Husain
Ansar Husain

Reputation: 144

Use below code for it 

<script>
var text, i, j, t, x = "";

var text = dmAPI.getNavItems();

for (i in text) {

if (text[i].inNavigation === true ) {
    x += '<li><a href="'+text[i].path+'">' + text[i].title + '</a>'
    x +='<ul>';
    if ( 'subNav' in text[i] ) {
        for (j in text[i].subNav) {
        x+='<li class="submenuitem"><a href="'+text[i].subNav[j].path +'">' + text[i].subNav[j].title + '</a>'

        for ( t in text[i].subNav[j].subNav) {
        x+='<li class="sub_submenuitem"><a href="'+text[i].subNav[j].subNav[t].path +'">' + text[i].subNav[j].subNav[t].title + '</a></li>';
    }

         x+='</li>';
    }

    }
    x +='</ul>';
    x +='</li>';
} //end if

}// end for

document.getElementById("demo").innerHTML = x;

<script>

Upvotes: 1

Related Questions