下面是一个多级嵌套的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里的信息。请问怎么做?
别人让我写遍历一次。
我不知道怎么写出来
function func() {
//todo
if (condition) {
func();
}
}
有什么问题吗?
那就来个花哨的递归版。自行改成想要的标签
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()
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);
(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会写得比较好看一点。