面对在JSON文件中获取第一级数据的问题

时间:2017-04-06 04:42:30

标签: javascript jquery json

我有一个名为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中我有一个像

这样的引导Tab组件
<ul class="nav nav-tabs" role="tablist">
</ul>

是否可以告诉我如何访问上级JSON文件action, comedy, animation并将其li动态填充为.nav-tabs

我已经尝试了

 $.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>')
   }
  });

但它没有完成这项工作。你能告诉我怎么解决这个问题吗?感谢

3 个答案:

答案 0 :(得分: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>')
  });
});

答案 1 :(得分:0)

您将对象视为数组,它是一个简单的对象使用for-in loop

  

for...in语句以任意顺序迭代对象的可枚举属性。对于每个不同的属性,可以执行语句。

&#13;
&#13;
var data = {
  "action": [{
      "id": "1001",
      "name": "Matrix"
    },
    {
      "id": "1002",
      "name": "IP Man"
    },
    {
      "id": "1003",
      "name": "Revenge"
    }
  ],
  "comedy": [{
      "id": "2001",
      "name": "Iceman"
    },
    {
      "id": "2002",
      "name": "Pat & Mat"
    },
    {
      "id": "2003",
      "name": "Sugar"
    }
  ],
  "animation": [{
      "id": "3001",
      "name": "Frozen"
    },
    {
      "id": "3002",
      "name": "Tangled"
    },
    {
      "id": "3003",
      "name": "Croods"
    }
  ]
};

for (var i in data) {
  $('.nav-tabs').append('<li><strong>' + i + '<strong></li>')
  for (var j = 0; j < data[i].length; j++) {
    var obj = data[i][j];
    $('.nav-tabs').append('<li>' + obj.name + '</li>')
  }
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
</ul>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

<?php

    while(stream_select($in = [STDIN], $out = [], $oob = [],0)){
        fgetc(STDIN);
    }

?>