[자바스크립트] 재귀함수로 계층구조(hierarchy structure) json 만들기

const makeBrandTree = (inputList,outputList,index, key) => {
    let tempList = [];
        
 
       // 상위메뉴와 하위메뉴 관계 => 0 > 01 > 011, 0 > 02 > 021,022
    tempList = inputList.filter((row) => row.key.length === index + 1 && row.key.substr(0, index) === key);
        
    // 해당하는 하위메뉴가 더이상 없을때 return 
    if (tempList.length == 0) {
        return outputList;
    }
        
    for (let i = 0; i < tempList.length; i++){
        if (tempList[i].children == undefined) {
            tempList[i].children = [];
        }
        // important!!!! children 배열을 던져줘야한다. index는 메뉴키의 자릿수로 이용함, 상위메뉴의 key도 줘야함.
        makeBrandTree(inputList, tempList[i].children, index + 1,tempList[i].key)
        outputList.push(tempList[i]);
    }
        
    return outputList
}

 예시 데이터

{ title: 'root', key: '1', seq: 0, url:'' },
{ title: '00', key: '10', seq: 0, url:''  },
{ title: '01', key: '11', seq: 1, url:''  },
{ title: '02', key: '12', seq: 2, url:''  },
{ title: '001', key: '101', seq: 0, url:''  },
{ title: '010', key: '110', seq: 0 , url:'' },
{ title: '011', key: '111', seq: 1, url:'www.naver.com'  },
{ title: '012', key: '112', seq: 2 , url:'' },
{ title: '03', key: '13', seq: 3, url:''  },
{ title: '030', key: '130', seq: 0, url:''  },

호출 방식

// makeBrandTree(기본리스트, 리턴될 리스트, 인덱스, 키값)
let brandTree = makeBrandTree(tempList, [], 0, '');

결과

[
    {
        "title":"root",
        "key":"1",
        "seq":0,
        "url":"",
        "children":[
            {
                "title":"00",
                "key":"10",
                "seq":0,
                "url":"",
                "children":[
                    {
                        "title":"001",
                        "key":"101",
                        "seq":0,
                        "url":"",
                        "children":[]
                    }
                ]
            },
            {
                "title":"01",
                "key":"11",
                "seq":1,
                "url":"",
                "children":[
                    {
                        "title":"010",
                        "key":"110",
                        "seq":0,
                        "url":"",
                        "children":[]
                    },
                    {
                        "title":"011",
                        "key":"111",
                        "seq":1,
                        "url":"www.naver.com",
                        "children":[]
                    },
                    {
                        "title":"012",
                        "key":"112",
                        "seq":2,
                        "url":"",
                        "children":[]
                    }
                ]
            },
            {
                "title":"02",
                "key":"12",
                "seq":2,
                "url":"",
                "children":[]
            },
            {
                "title":"03",
                "key":"13",
                "seq":3,
                "url":"",
                "children":[
                    {
                        "title":"030",
                        "key":"130",
                        "seq":0,
                        "url":"",
                        "children":[]
                    }
                ]
            }
        ]
    }
]