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

Question

我正在尝试将 JSON 数据动态加载到 Bootstrap 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

您的代码中存在一些逻辑错误和拼写错误。低于工作版本。

打字错误：在 "action" 中你写了参数名称，但在其他两个参数名称中是一个类型。

逻辑： 1. 使用 .append 导致关闭 HTML 元素，因此您需要构建一个完整的字符串然后追加。 2. 第二次循环后必须关闭parent for-loop，否则永远只有一个tab

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>

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

Not Able to Load JSON to Bootstrap Tab Properly

jquery

json

twitter-bootstrap

bootstrap-tabs

twitter-bootstrap-3