Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Xây dựng mảng cây từ JSON trong JavaScript


Giả sử chúng ta có mảng sau trong JavaScript:

const arr = [{ 
    "code": "2", 
    "name": "PENDING" 
}, { 
    "code": "2.2", 
    "name": "PENDING CHILDREN" 
}, { 
    "code": "2.2.01.01", 
    "name": "PENDING CHILDREN CHILDREN" 
}, { 
    "code": "2.2.01.02", 
    "name": "PENDING CHILDREN CHILDREN02" 
}, { 
    "code": "1", 
    "name": "ACTIVE" 
}, { 
    "code": "1.1", 
    "name": "ACTIVE CHILDREN" 
}, { 
    "code": "1.1.01", 
    "name": "ACTIVE CHILDREN CHILDREN" 
}];

Cần viết hàm nhận mảng như vậy. Hàm sẽ xây dựng cấu trúc cây từ mảng dựa trên thuộc tính "code" của đối tượng.

Đầu ra cho mảng trên sẽ trông như:

const output = [{ 
    "code": "2", 
    "name": "PENDING", 
    "children": [{ 
        "code": "2.2", 
        "name": "PENDING CHILDREN", 
        "children": [{ 
            "code": "2.2.01.01", 
            "name": "PENDING CHILDREN CHILDREN" 
        }, 
        { 
            "code": "2.2.01.02", 
            "name": "PENDING CHILDREN CHILDREN02" 
        }] 
    }] 
}, { 
    "code": "1", 
    "name": "ACTIVE", 
    "children": [{ 
        "code": "1.1", 
        "name": "ACTIVE CHILDREN", 
        "children": [{ 
            "code": "1.1.01", 
            "name": "ACTIVE CHILDREN CHILDREN" 
        }] 
    }] 
}];

Ví dụ

Mã thực hiện như sau:

const arr = [{ 
    "code": "2", 
    "name": "PENDING" 
}, { 
    "code": "2.2", 
    "name": "PENDING CHILDREN" 
}, { 
    "code": "2.2.01.01", 
    "name": "PENDING CHILDREN CHILDREN" 
}, { 
    "code": "2.2.01.02", 
    "name": "PENDING CHILDREN CHILDREN02" 
}, { 
    "code": "1", 
    "name": "ACTIVE" 
}, { 
    "code": "1.1", 
    "name": "ACTIVE CHILDREN" 
}, { 
    "code": "1.1.01", 
    "name": "ACTIVE CHILDREN CHILDREN" 
}]; 
const transformToTree = (arr, root = '') => { 
    let map = {}, last = [root], level = 0; 
    map[root] = {}; 
    arr.forEach(el => { 
        let parent = root; 
        while (level && last[level].length >= el.code.length) { 
            level--; 
        }; 
        parent = last[level]; 
        level++; 
        last.length = level; 
        last.push(el.code); 
        map[el.code] = el; 
        map[parent].children = map[parent].children || []; 
        map[parent].children.push(el); 
    }); 
    return map[root].children; 
}; 
console.log(JSON.stringify(transformToTree(arr), undefined, 4));

Kết quả

Kết quả trong console sẽ là:

[ 
    { 
        "code": "2", 
        "name": "PENDING", 
        "children": [ 
            { 
                "code": "2.2", 
                "name": "PENDING CHILDREN", 
                "children": [ 
                    { 
                        "code": "2.2.01.01", 
                        "name": "PENDING CHILDREN CHILDREN" 
                    }, 
                    { 
                        "code": "2.2.01.02", 
                        "name": "PENDING CHILDREN CHILDREN02" 
                    } 
                ] 
            } 
        ] 
    }, 
    { 
        "code": "1", 
        "name": "ACTIVE", 
        "children": [ 
            { 
                "code": "1.1", 
                "name": "ACTIVE CHILDREN", 
                "children": [ 
                    { 
                        "code": "1.1.01", 
                        "name": "ACTIVE CHILDREN CHILDREN" 
                    } 
                ] 
            } 
        ] 
    } 
]