찰떡개발자 코딩

우선 나는 Tree구조로 되어있는 Menu를 만들때 Javascript의 Object는 순서가 보장되지 않는다는것을 알았다.

DB에서부터 정렬을 잘 해서 Javascript로 받고, Javascript에서 Tree구조를 만들때 발생한 상황이다.

예를들어

원하는 순서는 1,2,3,4,5 => 입력된 순서라고하면

Javascript Object를 사용해 For문을 돌리고 Tree구조를 만들때 2,1,3,4,5 이런식으로 순서가 섞이는 상황이 발생하였다.

이에 해결방안으로 Tree구조를 만들고, 내가 원하는 특정 키로 Sort하는 방식을 사용했다.

function convertMenuTree(arr) {
	var tree = [],
	mappedArr = {},
	arrElem,
	mappedElem;

	for(var i = 0, len = arr.length; i < len; i++) {
		arrElem = arr[i];
		mappedArr[arrElem.menuId] = arrElem;
		mappedArr[arrElem.menuId]['children'] = [];
	}
	for (var id in mappedArr) {
		if (mappedArr.hasOwnProperty(id)) {
			mappedElem = mappedArr[id];
			if (mappedElem.parentId) {
				mappedArr[mappedElem['parentId']]['children'].push(mappedElem);
			}
			else {
				tree.push(mappedElem);
			}
		}
	}
	//Tree구조 완성
	//menuSort와 menuOrderId 순서대로 Sorting
	for(var i in tree){
		tree[i].children.sort(function (a, b) {
			return a.menuOrderId < b.menuOrderId ? -1 : a.menuOrderId > b.menuOrderId ? 1 : 0;
		});
	}
	tree.sort(function (a, b) {
		return a.menuSort < b.menuSort ? -1 : a.menuSort > b.menuSort ? 1 : 0;
	});
	return tree;
}

순서 : 

우선 처음 Tree구조를 만들어내고 => 순서를 기준으로 할 인자값을 정해 순서대로 정렬하였다.

종종 발생할 수 있으니 알아두기로 하자...!