鍍金池/ 問答/HTML/ js、vue 樹狀圖 添加 索引值

js、vue 樹狀圖 添加 索引值

clipboard.png

{
        "name": "第一層",
        index:1,
        "children":[
            {
                "name":"第二層",
                index:2,
            },{
                "name":"第二層",
                index:2,
                "children":[
                    {
                        "name":"第三層",
                        index:3,
                    },{
                        "name":"第三層",
                        index:3,
                    },
                ]
            }
        ]
    }
    

想在這個樹狀圖中添加他們每一層的index,

回答
編輯回答
懷中人

最終寫法。

    function fun(arry){
        for(let i in arry){
            let menu = arry[i];
            if(!menu['num']){
                menu['num'] = 1;
            }
            if(menu['children'].length && menu['children']){
                for(let j in menu['children']){
                    menu['children'][j]['num'] = arry[i]['num'] + 1;
                    fun(menu['children'])
                }
            }
        }
    }
2017年10月3日 21:17
編輯回答
巷尾
var ary = {
    "name": "第一層",
    index:1,
    "children":[
        {
            "name":"第二層",
            index:2,
        },{
            "name":"第二層",
            index:2,
            "children":[
                {
                    "name":"第三層",
                    index:3,
                },{
                    "name":"第三層",
                    index:3,
                },
            ]
        }
    ]
}

function level(obj) {
    if (!obj.level) {
        obj.level = 1
    }

    if (!obj.children || !obj.children.length) {
        return
    }

    obj.children.forEach(function(el) {
        el.level = obj.level + 1

        level(el)
    })
}

level(ary)

console.log(ary)
var ary = [{
    "name": "第一層",
    index:1,
    "children":[
        {
            "name":"第二層",
            index:2,
        },{
            "name":"第二層",
            index:2,
            "children":[
                {
                    "name":"第三層",
                    index:3,
                },{
                    "name":"第三層",
                    index:3,
                },
            ]
        }
    ]
},
{
    "name": "第一層",
    index:1,
    "children":[
        {
            "name":"第二層",
            index:2,
        },{
            "name":"第二層",
            index:2,
            "children":[
                {
                    "name":"第三層",
                    index:3,
                },{
                    "name":"第三層",
                    index:3,
                },
            ]
        }
    ]
}
]

function level(ary) {
    ary.forEach(function(el) {
        if (!el.level) {
            el.level = 1
        }

        if (!el.children || !el.children.length) {
            return
        }
        
        el.children.forEach(function(item) {
            item.level = el.level + 1
        })
        
        level(el.children)
    })
}

level(ary)

console.log(ary)

一個對象,一個數(shù)組

2017年5月30日 19:26