js递归遍历json并输出

2022-06-09 网页编程网 网页编程网

<head>
<meta charset="utf-8">
</head><body>
<div class="lists">
</div>
<script>
var data = [{
        name: 'a',
        age: 1,
        children: [{
                name: 'a1',
                age: 1,
            },
            {
                name: 'a2',
                age: 1,
                children: [{
                        name: 'a21',
                        age: 1,
                    },
                    {
                        name: 'a22',
                        age: 1,
                    },
                ]
            },
        ]
    },
    {
        name: 'b',
        age: 1,
        children: [{
                name: 'b1',
                age: 1,
                children: [{
                        name: 'b11',
                        age: 1,
                    },
                    {
                        name: 'b12',
                        age: 1,
                    },
                ]
            },
            {
                name: 'b2',
                age: 1,
                children: [{
                        name: 'b22',
                        age: 1,
                    },
                    {
                        name: 'b22',
                        age: 1,
                        children: [{
                                name: 'b21',
                                age: 1,
                            },
                            {
                                name: 'b22',
                                age: 1,
                            },
                            {
                                name: 'b23',
                                age: 1,
                            },
                        ]
                    },
                ]
            },
        ]
    },
]
window.onload=function(){
function createTree(data){
	var str='<ul>'
	for(var i=0;i<data.length;i++){//也可这样for (let i in data)
		str+='<li>'+data[i].name+'</li>'
		if(data[i].children){
			str+=createTree(data[i].children)
		}
	}//for
	str+='</ul>'
	return str
}//createTree
document.querySelector('.lists').innerHTML=createTree(data)
}//window
</script>
<p>1.无限循环，递归显示。</p>
</body>
</html>

阅读原文

阅读 2007

123 显示电脑版