Question

我一直在尝试使用$ .getJSON方法从JSON文件中获取一些值。前两个循环是静态的，所以我编写了下面的代码来获取“layers.name”的值。从第三个循环开始，层中的数据可能可用，也可能不可用。如何获取JSON文件中显示的所有“layers.name”的值

PS：JSON文件是从显示图层的软件生成的输出以这种格式

这里到目前为止我已经使用了代码，我获得了前两个循环层。

HTML

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="test.js"></script>
</body>

Javscript

$.getJSON('https://api.myjson.com/bins/6atbz', function(data) {
      var layer = data.layers.reverse()
      for (i=0; i<layer.length; i ++){
        name = data.layers[i].name
        id= data.layers[i].do_objectID
        var className = '.'+id
        var main = "<div class=\""+id+"\" data-number=\""+i+"\">"+name+"<\/div>"
        $('body').append(main);
        var subLayer = data.layers[i].layers.reverse()
        for(j=0; j<subLayer.length; j++){
          newname = data.layers[i].layers[j].name
          $().append(' '+newname);
          var subsubLayer = data.layers[i].layers[j]
          var sub = "<div class=\""+newname+"\" data-number=\""+j+"\">"+newname+"<\/div>"

          $(className).append(sub);
        }

      }

})

由于

Link to Fiddle

Answer 1

我认为使用递归是一个好主意。这是一个例子：

var container = document.getElementById("container");

$.getJSON('https://api.myjson.com/bins/6atbz', function(data) {
  buildTree(data, container)
})

function buildTree (node, container) {
  var layers = node.layers || [];
  console.info(node);

  layers.forEach(function(item) {
    var newContainer = document.createElement('div');
    var span = document.createElement('span');
    span.innerHTML = item.name;
    newContainer.appendChild(span);

    container.appendChild(newContainer);
    if(item.layers){
      buildTree(item, newContainer)
    }
  });
}

这是直播demo

使用jQuery $ .getJSON方法从具有多维数组的JSON文件中获取值

1 个答案: