无法将JSON正确加载到Bootstrap选项卡

Question

我正在尝试像以下代码一样将JSON数据动态加载到Bootstrap 3 Tab中。 我能够加载nav-tabs，但在加载内容上没有任何成功。 您能否看一下这个问题，让我知道如何解决？

  var data = { "action": [ { "id": "1001", "name": "Matrix" }, { "id": "1002", "name": "IP Man" }, { "id": "1003", "name": "Revenge" } ], "comedy": [ { "id": "2001", "type": "Iceman" }, { "id": "2002", "type": "Pat & Mat" }, { "id": "2003", "type": "Sugar" } ], "animation": [ { "id": "3001", "type": "Frozen" }, { "id": "3002", "type": "Tangled" }, { "id": "3003", "type": "Croods" } ] }; for (var i in data) { $('.nav-tabs').append('<li role="presentation" class=""><a href="#' + i + '" aria-controls="' + i + '" role="tab" data-toggle="tab">' + i + '</a></li>'); } for (var j = 0; j < data[i].length; j++) { var obj = data[i][j]; $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + obj.name + '">' + obj.name + '</div>'); } $('.nav-tabs li').eq(0).addClass('active'); 

 body{padding:30px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <ul class="nav nav-tabs" role="tablist"></ul> <div class="tab-content"></div> </div> 

Answer 1

您的代码中有几个逻辑错误和拼写错误。 下面的工作版本。

错别字：在“操作”中，您将磁带参数名称命名，但是在其他两个参数名称中则是一种类型。

逻辑：1.使用.append会导致HTML元素关闭，因此您需要构建一个完整的字符串，然后追加。 2.您必须在第二个循环之后关闭父for循环，否则，您始终只有一个选项卡。

 var data = { "action": [ { "id": "1001", "type": "Matrix" }, { "id": "1002", "type": "IP Man" }, { "id": "1003", "type": "Revenge" } ], "comedy": [ { "id": "2001", "type": "Iceman" }, { "id": "2002", "type": "Pat & Mat" }, { "id": "2003", "type": "Sugar" } ], "animation": [ { "id": "3001", "type": "Frozen" }, { "id": "3002", "type": "Tangled" }, { "id": "3003", "type": "Croods" } ] }; for (var i in data) { $('.nav-tabs').append('<li role="presentation" class=""><a href="#' + i + '" aria-controls="' + i + '" role="tab" data-toggle="tab">' + i + '</a></li>'); var div = '<div role="tabpanel" class="tab-pane" id="' + i + '">'; for (var j = 0; j < data[i].length; j++) { var obj = data[i][j]; div += '<div id="' + obj.id + '">' + obj.type + '</div>'; } $('.tab-content').append(div); } $('.nav-tabs li').eq(0).addClass('active'); $('.tab-content div').eq(0).addClass('active'); 

 body{padding:30px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <ul class="nav nav-tabs" role="tablist"></ul> <div class="tab-content"></div> </div> 

Answer 2

 var data = { "action": [ { "id": "1001", "type": "Matrix" }, { "id": "1002", "type": "IP Man" }, { "id": "1003", "type": "Revenge" } ], "comedy": [ { "id": "2001", "type": "Iceman" }, { "id": "2002", "type": "Pat & Mat" }, { "id": "2003", "type": "Sugar" } ], "animation": [ { "id": "3001", "type": "Frozen" }, { "id": "3002", "type": "Tangled" }, { "id": "3003", "type": "Croods" } ] }; for (var i in data) { $('.nav-tabs').append('<li role="presentation" class=""><a href="#' + i + '" aria-controls="' + i + '" role="tab" data-toggle="tab">' + i + '</a></li>'); var div = '<div role="tabpanel" class="tab-pane" id="' + i + '">'; for (var j = 0; j < data[i].length; j++) { var obj = data[i][j]; div += '<div id="' + obj.id + '">' + obj.type + '</div>'; } $('.tab-content').append(div); } $('.nav-tabs li').eq(0).addClass('active'); $('.tab-content div').eq(0).addClass('active'); 

 body{padding:30px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <ul class="nav nav-tabs" role="tablist"></ul> <div class="tab-content"></div> </div>