Question

下面的代码应该在vanilla js中创建一个类别和子类别列表。我正在使用2个for循环。代码适用于第一级，但不适用于添加第二级。谁能告诉我为什么它只返回第一类？我是新手。

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(xhttp.responseText);
      var allBirds = response.birds;

      for (var i = 0; i < allBirds.length; i++) {
        var el = document.createElement('li');
        el.innerHTML = allBirds[i].family;
        var ul = document.getElementById('overview');
        insertAfter(ul, el);

        var members = allBirds[i].members;
        for (var j = 0; j < members.length; j++) {
          var elj = document.createElement('h5');
          var ulj = document.getElementById('innerView');
          insertAfter(elj, ulj);
        }
      }
    }
  };

xhttp.open('GET', 'JSON/birds.json', true);
xhttp.send();

这是期望的结果：类别子类子类类别子类。

Answer 1

如果尝试解析数组/对象，请使用递归函数自行封闭每个“层”。使用顶级节点调用该函数。该函数必须循环遍历所有子元素，并确定它是否为叶子（此节点为无子元素）或节点（包含子元素）。

如果它是Leaf，您可以生成一些输出。如果它是一个节点你会更深入到兔子洞：）

您使用的for - 循环是经典循环。每个循环都会counter递增，您将从数组中获取值。我使用了另一个for - 循环。我不需要知道数组键。我只是问阵列“嘿！给我所有钥匙”。然后我使用这个键for(var key in node)

要检查我使用typeof的孩子的类型，女巫会将变量的类型作为字符串返回（例如typeof("Hello World")将返回“string”）。因此，您可以决定如何处理变量/子项。

接下来是===。这是另一个运营商==。短篇小说：===检查身份，==求平等。假设你有两个叫Alex的朋友。具有相同的名称（==），但不同的（!==）人。长篇小说：Which equals operator (== vs ===) should be used in JavaScript comparisons?

然后我添加一个计数器（deep）以了解递归的级别（但我不使用它）由您根据级别创建输出。您可以在文本前添加一些点以显示深度或其他内容。我会正确使用这个var text = '...........'.substr(0,deep) + node[key].family

这样的递归函数：

function listChildren(node, deep){
    for (var key in node) {
      if(typeof(node[key])  === 'array' || typeof(node[key]) === 'object'){
        var el = document.createElement('li');
        el.innerHTML(key);
        var ul = document.getElementById('overview');
        insertAfter(el, ul);
        listChildren(node[key], ++deep);
      }else{
        var el = document.createElement('li');
        el.innerHTML(node[key].family);
        var ul = document.getElementById('overview');
        insertAfter(el, ul);
    }
}

这只是一个暗示。你必须根据自己的需要进行修改！

Answer 2

只关注这一部分，你应该动态地创建它：

function birdLister(xhrResponse, appendTo){
  var allBirds = xhrResponse.birds, all = document.createElement('ul');
  for(var i=0,b,ti,ui,u,m,l=allBirds.length; i<l; i++) {
    b = allBirds[i]; ti = document.createElement('li'); ti.innerHTML = b.family;
    ui = document.createElement('il'); u = document.createElement('ul'); m = b.members;
    for(var n=0,li,c=m.length; n<c; n++){
      li = document.createElement('li'); li.innerHTML = m[n]; u.appendChild(li);
    }
    ui.appendChild(u); all.appendChild(ti); all.appendChild(ui);
  }
  appendTo.appendChild(all);
}

现在在你的XHR里面：

var xhttp = new XMLHttpRequest();
xhttp.open('GET', 'JSON/birds.json');
xhttp.onreadystatechange = function(){
  if(this.readyState === 4 && this.status === 200){
    var response = JSON.parse(this.responseText);
    birdLister(response, document.getElementById('output'));
  }
}
xhttp.send();

Answer 3

对于其他用户，这就是我使用PHPglue的代码为我工作的方式：

function changeColor(selector){
  var divs = document.querySelectorAll(selector);
  var elems = [];
  divs.forEach(function(elem){
    elems.push(elem);
  });
  return elems;
}

Array.prototype.mystyle = function(style,value){
  for(var i=0; i<this.length ; i++){
    this[i].style[style] = value;
  }
}

changeColor("h2").mystyle("color","blue");

相应的HTML文件只是一个基本设置和一个div，其中ID为“概述”。

https://github.com/dariusk/corpora/blob/master/data/animals/birds_antarctica.json

如何列出JSON文件中的类别和子类别？

3 个答案: