Dynamically Nested Tab Creation

Question

I am trying to achieve dynamically nested tab based on my data set.I am able to achieve parent tab successfully but having a issue with child tab. Code

$(document).ready(function() {
var data1 = [["FINANCE"],["SALE"],["SALE3"]];
var data2=[["FINANCE","FINANCE1"],["FINANCE","FINANCE2"],["SALE","SALE1"],["SALE","SALE2"],["SALE","SALE3"],["SALE","SALE4"],["SALE3","NOSALE"]]
 var stringData = "";
var dyn_div="";
var dyn_ul="";
var dyn_li='';
for (var i = 0; i < data1.length; i++) {
  stringData = "<li><a data-toggle='tab'  href=#"+data1[i]+">"+data1[i]+"</a></li>"
  $(".list").append(stringData);
  $(".list li:first-child").addClass("active");
  dyn_div="<div class='tab-pane fade' id="+data1[i]+">'<ul class='p nav nav-tabs'>";
for(var j=i;j< data2.length;j++)
{    
      if(data2[j][0]==data1[i]){

        dyn_li= "<li><a data-toggle='tab'  href=#"+data2[j][1]+">"+data2[j][1]+"</a></li>" 
         $(".p").append(dyn_li);
       dyn_div +='</ul></div>';
          $(".tab-content").append(dyn_div);
          }
          else
          {
          dyn_li=''
           $(".p").append('');
          }

             } 
 }
 $(".p li:first-child").addClass("active");
 $(".tab-content div.tab-pane:first-child").addClass("active in");
 })

HTML Code

<ul class="list nav nav-tabs"></ul>
<div class="tab-content"></div>

OUTPUT

I am unable to understand where i am doing .The FINANCE Tab have only FINANCE child like Finance1 ,Finance and SALE Tab have only SALE child tab.Can anyone help me to identified the issue where i am doing wrong.

a minimal, complete and verifiable example would really help us better appreciate the problem. while an image may represent a thousand words, a snippet represents a thousand images — Scaramouche
– Scaramouche, Commented Apr 5, 2018 at 13:43

Tan Duong · Accepted Answer · 2018-04-05 14:38:16Z

1

You need to format your code for easy to read

You used wrong param to compare data1[i] instead of data1[i][0]. That make wrong href also

You need to append all in data to dyn_div. Don't use $(.p).append, that will get the appended item instead of current item.

$(document).ready(function () {
    var data1 = [
        ["FINANCE"],
        ["SALE"],
        ["SALE3"]
    ];
    var data2 = [
        ["FINANCE", "FINANCE1"],
        ["FINANCE", "FINANCE2"],
        ["SALE", "SALE1"],
        ["SALE", "SALE2"],
        ["SALE", "SALE3"],
        ["SALE", "SALE4"],
        ["SALE3", "NOSALE"]
    ]
    var stringData = "";
    var dyn_ul = "";
    var dyn_li = '';
    var dyn_div = '';
    for (var i = 0; i < data1.length; i++) {
        stringData = $("<li><a data-toggle='tab'  href=#" + data1[i][0] + ">" + data1[i][0] + "</a></li>");
        $(".list").append(stringData);
        $(".list li:first-child").addClass("active");
        dyn_div = "<div class='tab-pane fade' id=" + data1[i][0] + "><ul class='p nav nav-tabs'>";
        for (var j = 0; j < data2.length; j++) {
            if (data2[j][0] === data1[i][0]) {
                dyn_div += "<li><a data-toggle='tab'  href=#" + data2[j][1] + ">" + data2[j][1] + "</a></li>";
            }
        }
        dyn_div += '</ul></div>';
        $(".tab-content").append(dyn_div);
    }
    $(".p li:first-child").addClass("active");
    $(".tab-content div.tab-pane:first-child").addClass("active in");
})

edited Apr 5, 2018 at 14:38

answered Apr 5, 2018 at 14:28

Tan Duong

2,1421 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

monu Over a year ago

Thanks a lot for your quick response..Thats work very fine

Edwin Krause · Accepted Answer · 2018-04-05 14:24:46Z

Although this might not be a 100% working solution I believe your main error here is the line $(".p").append(dyn_li); Since at some point there are more than one element with class p this will double everything.

So here is my rough untested suggestion:

    var data1 = [["FINANCE"],["SALE"],["SALE3"]];
    var data2=[["FINANCE","FINANCE1"],["FINANCE","FINANCE2"],["SALE","SALE1"],["SALE","SALE2"],["SALE","SALE3"],["SALE","SALE4"],["SALE3","NOSALE"]]
    var stringData = "";
    var dyn_div="";
    var dyn_ul="";
    var dyn_li='';
    for (var i = 0; i < data1.length; i++) {

        stringData = "<li><a data-toggle='tab' href=#"+data1[i]+">"+data1[i]+"</a></li>"
        $(".list").append(stringData); // this element should also be addressed by an unique ID, but if there is only one element with that class, it's fine
        dyn_div="<div class='tab-pane fade' id="+data1[i]+">'<ul class='p nav nav-tabs'>";
        for(var j=i;j< data2.length;j++){    
          if(data2[j][0]==data1[i]){
                dyn_li= "<li><a data-toggle='tab'  href=#"+data2[j][1]+">"+data2[j][1]+"</a></li>" 
                $("#"+data1[i]).find('.p').first().append(dyn_li); // Here big change
                dyn_div +='</ul></div>';
                $(".tab-content").append(dyn_div); // this also needs to be a unique DOM element
            }
        } 
     }
     $(".p li:first-child").addClass("active");
     $(".tab-content div.tab-pane:first-child").addClass("active in");

Collectives™ on Stack Overflow

Dynamically Nested Tab Creation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related