JSONをブートストラップ・タブに正しくロードできない

Question

次のコードのようにJSONデータをブートストラップ3タブに動的にロードしようとしています。ナビゲーションタブを読み込むことはできますが、コンテンツの読み込みには成功しません。あなたはこれを見て、それを修正する方法を教えてくださいできますか？

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

あなたはあなたのコード内のロジックやタイプミスエラーのカップルを持っています。下の作業バージョン。

Typo：「アクション」ではテープパラメータ名が使用されますが、他の2つのパラメータ名にはタイプがあります。

ロジック： 1. .appendを使用すると、HTML要素が閉じます。そのため、完全な文字列を作成してから追加する必要があります。 2. 2番目のループの後にfor-loopの親を閉じる必要があります。そうでなければ、常に1つのタブしかありません。

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>