javascript的递归？ 如何写出js的递归然后读取json添加到相对应的dom中？

Question

下面是一个多级嵌套的JSON，使用AJAX方式，应用递归把每一级JSON，都添加 到相应的DOM中。

{
    "name": "BeJson",
    "url": "http://www.bejsoxxn.com",
    "page": 88,
    "isNonProfit": true,
    "address": {
        "street": "科技园路.",
        "city": "江苏苏州",
        "country": "中国"
    },
    "links": [
        {
            "name": "Google",
            "url": "http://www.google.com"
        },
        {
            "name": "Baidu",
            "url": "http://www.baidu.com"
        }
    ]
}

    for(var i in data){
         var ul = document.createElement("ul");
         var li = document.createElement('li');
         li.innerHTML=data[i];
         ul.appendChild(li);
       document.body.appendChild(ul);
    }

以下是浏览器显示的信息

BeJson
http://www.bejsoxxn.com
88
true
[object Object]
[object Object],[object Object]

我想让 浏览器页面倒数一二 显示json里的信息。请问怎么做？
别人让我写遍历一次。
我不知道怎么写出来

Answer 1

(function(){
  var res = {
    name:"aa",
    child:{
      name: "bb",
      child: {
        name: "cc",
        child: null
      }
    }
  };
  var container = document.querySelector(".container");
  function insertNode(parent, node){
    console.log(parent, node);
    var li = document.createElement("li");
    var text = document.createTextNode(node.name);
    li.appendChild(text);
    if(node.child){
      var ul = document.createElement("ul");
      insertNode(ul, node.child);
      li.appendChild(ul);
    }
    parent.appendChild(li);
  }
  insertNode(container, res);
})();

一个纯js的例子，如果页面嵌套复杂的情况，写起来就可能比较麻烦了。
如果你使用angular或者vue的话，通过data binding会写得比较好看一点。

Answer 2

function func() {
    //todo
    
    if (condition) {
        func();
    }
}

有什么问题吗？

Answer 3

var json = {
    "name": "BeJson",
    "url": "http://www.bejsoxxn.com",
    "page": 88,
    "isNonProfit": true,
    "address": {
        "street": "科技园路.",
        "city": "江苏苏州",
        "country": "中国"
    },
    "links": [
        {
            "name": "Google",
            "url": "http://www.google.com"
        },
        {
            "name": "Baidu",
            "url": "http://www.baidu.com"
        },
        'test'
    ]
}

function getDOM(j){
    if(j){
        var topType = typeof(j);
        if(topType === 'object'){
            var s = '';
            if(j instanceof Array){
                for(var i = 0; i < j.length; i++){
                    s += '<li>' + getDOM(j[i]) + '</li>';                    
                }
            }else{
                for( var prop in j ){
                    if(prop){
                        s += '<li>';
                        var subType = typeof(j[prop]);
                        if(subType != 'function' && subType != 'undefined'){
                            if(subType === 'object'){
                                s += '<div>' + prop + ' :</div>' + getDOM(j[prop]);
                            }else{
                                s += '<div>' + prop + ' : ' + j[prop] + ' :</div>';
                            }
                        }else{
                            console.log(prop + ' :');
                            console.log(j[prop]);
                        }
                        s += '</li>';
                    }
                }
            }
            if(s){
                s = '<ul>' + s + '</ul>';
            }
        }else if(topType != 'function'){
            var s = '<div>' + j + '</div>';
        }
        return s;
    }else{
        console.log('j : ' + j);
        return '';
    }
}

document.getElementById('container').innerHTML = getDOM(json);

Answer 4

那就来个花哨的递归版。自行改成想要的标签

Boolean.prototype.show = Number.prototype.show = String.prototype.show = function () {
    return this.toString()
}

Object.prototype.show = function(tag) {
    var open="<ul>",close="</ul>";
    
    var k,str = "";
    for(k in this){
        if(this.hasOwnProperty(k)){
            str += "<li>" + k + ":" + this[k].show() + "</li>";
        }
    }
    return open + str + close;
}
// 这句可以不加，如果 Array 和 Object 显示一样的话
// Array.prototype.show = Object.prototype.show

var data = {
    "name": "BeJson",
    "url": "http://www.bejsoxxn.com",
    "page": 88,
    "isNonProfit": true,
    "address": {
        "street": "科技园路.",
        "city": "江苏苏州",
        "country": "中国"
    },
    "links": [
        {
            "name": "Google",
            "url": "http://www.google.com"
        },
        {
            "name": "Baidu",
            "url": "http://www.baidu.com"
        }
    ]
}
// 某个标签
document.body.innerHTML = data.show()