javascript - 数据怎么以层级的形式渲染到页面？

问题描述

问 题

var arr = [{
            "title": "金融业",
            "items": [{
                "title": "2016金融产品投资",
                "items": [{
                    "title": "2016金融产品投资分析1",
                    "data": ["用户投资资料1", "用户投资资料2", "用户投资资料3"]
                },{
                    "title": "2016金融产品投资分析2",
                    "data": ["用户投资资料1", "用户投资资料2", "用户投资资料3"]
                }]
            }, {
                "title": "2017金融产品投资",
                "data": ["用户投资资料33", "用户投资资料19"]
            }]
        }, {
            "title": "银行业",
            "items": [{
                "title": "2016银行产品投资",
                "data": ["用户投资资料1", "用户投资资料1"]
            }, {
                "title": "2017银行产品投资",
                "data": ["用户投资资料1", "用户投资资料1", "用户投资资料1"]
            }]
        }];

比如这种格式的数据怎么以层级渲染到页面，数据的层级不一定每次都相同，怎么写一个方法读取数据后自动按层级渲染到页面？？
我写过三级层级的渲染，如下：

var arr = [{
            "title": "金融业",
            "items": [{
                "title": "2016金融产品投资",
                "data": ["用户投资资料1", "用户投资资料2", "用户投资资料3"]
            }, {
                "title": "2017金融产品投资",
                "data": ["用户投资资料33", "用户投资资料19"]
            }]
        }, {
            "title": "银行业",
            "items": [{
                "title": "2016银行产品投资",
                "data": ["用户投资资料1", "用户投资资料1"]
            }, {
                "title": "2017银行产品投资",
                "data": ["用户投资资料1", "用户投资资料1", "用户投资资料1"]
            }]
        }];

var htm = arr.map(function (da1, index1) {
            var htm2 = (arr[index1].items.map(function (da2, index2) {
                var htm3 = (arr[index1].items[index2].data.map(function (da3) {
                    return ("<li class='flow-list'>" + da3 + "</li>");
                })).join("");
                return ("<li class='lm-l'><a class='lm-a menu-t2'>" + da2.title + "<span class='drop-down-ico'></span></a>" + "<ul class='lm-w menu-w2'>" + htm3 + "</ul></li>");
            })).join("");
            return ("<li class='lm-l'><a class='lm-a menu-t1'>" + da1.title + "<span class='drop-down-ico'></span></a>" + "<ul class='lm-w menu-w1'>" + htm2 + "</ul></li>");
        }).join("");

        $("#flowWarp").html(htm);

但确定很明显只能显示三级层级的数据，数据有可能是四级五级层级就蒙蔽了，求大神解答？？？谢谢

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

递归如何？大概这样

var str='';
function digui(data){
    console.log(data);
   if(data!=undefined && data.length>0){
    data.map(function(item){
      str+="<li class='lm-l'><a class='lm-a menu-t2'>" + item.title + "<span class='drop-down-ico'></span></a>" + "<ul class='lm-w menu-w2'>";
      digui(item.items);
      str+= "</ul></li>";
    });
   }
}
digui(arr);
console.log(str);

这篇关于javascript - 数据怎么以层级的形式渲染到页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！