javascript - 在 JSON 文件中获取第一级数据时面临问题

Question

我有一个名为 movie.json 的外部 JSON 文件，格式如下

{
    "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" }
             ]

}

在我的 HTML 中，我有一个引导选项卡组件，例如

<ul class="nav nav-tabs" role="tablist">
</ul>

您能否告诉我如何访问上层 JSON 文件( Action 、喜剧、动画，并将它们填充为 .json 中的 li )导航选项卡动态

我已经尝试过

 $.getJSON('data.json', function (data) {
       for (i = 0; i < data.length; i++) { 
             $('.nav-tabs').append('<li role="presentation" ><a href="#'+data[0]+'" aria-controls="'+data[0]+'" role="tab" data-toggle="tab">'+data[0]+'</a></li>')
   }
  });

但它没有完成这项工作。你能让我知道如何解决这个问题吗？谢谢

Answer 1

您可以使用$.each()来迭代数据。 key 为“顶层”，val 为内容

$.getJSON('data.json', function (data) {
   $.each( data, function( key, val ) {
     $('.nav-tabs').append('<li role="presentation" ><a href="#'+key+'" aria-controls="'+key+'" role="tab" data-toggle="tab">'+key+'</a></li>')
  });
});