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 ("
" + da3 + "
");
                })).join("");
                return ("
" + da2.title + "" + "
" + htm3 + "
");
            })).join("");
            return ("
" + da1.title + "" + "
" + htm2 + "
");
        }).join("");

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

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