[JS] 계층(hierarchical) 구조의 데이터를 JSON 데이터로 변환하기

INDEX

다음과 같은 구조의 데이터가 있다.

 

var obj =[ 
    {'level' : 1, 'name' : 'grandParent1'},
    {'level' : 2, 'name' : 'parent1'},
    {'level' : 3, 'name' : 'child1'},
    {'level' : 3, 'name' : 'child2'},
    {'level' : 3, 'name' : 'child3'},
    {'level' : 2, 'name' : 'parent2'},
    {'level' : 1, 'name' : 'grandParent2'},
    {'level' : 2, 'name' : 'parent3'},
    {'level' : 3, 'name' : 'child4'},
    {'level' : 3, 'name' : 'child5'}
]

이를 도식화해보면 

 

흡사 윈도우 파일구조와 같다.

이렇게 계층 구조의 데이터를 DataGrid 나 TableGrid 혹은 윈도우 파일구조처럼 트리구조를 구현하려 한다면 잘 정리된 데이터로 정제해야한다. 아니면 쓰고자 하는 library 에 맞는 데이터로 변환해야 한다.

 

내가 사용했던 easyUI 의 datagrid 는 부모 object 의 key로 children 을 추가한뒤 자식 노드들을 다 담아야 한다.

이를 코드로 옮겨 보면

const dataToJSON = (data)=>{
    const addChildToParent = (child, parent)=>{
        if(!parent || !child) return; //잘못된 데이터(빈칸 혹은 빈 값) 들어올수 있다
        parent.children.push(child);
    }
    var cnvtData = [];
    for (var i =0; i< data.length; i++){
        data[i].children = [];
        if(data[i].level == 1){ //최상위 부모는 자식이 될수없다
            window['item1'] = data[i];  
            cnvtData.push(window['item1']);
        }else{
            var parent = window['item' +(data[i].level-1)];//JS에서 동적변수를 사용하는 법
            var child = window['item'+(data[i].level)]; //level이 1작은 노드가 부모이기 때문
            addChildToParent(child,parent);
        }
    }
    return cnvtData;
    
}

var obj =[ 
    {'level' : 1, 'name' : 'grandParent1'},
    {'level' : 2, 'name' : 'parent1'},
    {'level' : 3, 'name' : 'child1'},
    {'level' : 3, 'name' : 'child2'},
    {'level' : 3, 'name' : 'child3'},
    {'level' : 2, 'name' : 'parent2'},
    {'level' : 1, 'name' : 'grandParent2'},
    {'level' : 2, 'name' : 'parent3'},
    {'level' : 3, 'name' : 'child4'},
    {'level' : 3, 'name' : 'child5'}
]
dataToJSON(obj);

결과는 다음과 같다.

 

 

끗ㅎ