배열 그룹화

jqGrid 인라인뷰 편집 기능 중 셀렉트박스 드롭다운 기능을 구현하며 맞닥뜨린 부분을 기록하고자 합니다. 먼저 그리드 최초 조회 시 전체 데이터가 그리드 세팅됩니다. 이때 데이터는 고객사별 담당자라고 가정하며, 복수 고객사별 복수 담당자가 존재하게 됩니다. 이후 특정 행을 체크하면 해당 행을 편집할 수 있는데, 해당 고객사의 담당자를 변경할 목적이기에 해당 고객사에 해당하는 직원 목록이 드롭다운으로 표시되어야 합니다. 이를 위해 저는 전체 데이터를 고객사별로 그룹화해야 했습니다. 예를 통해 살펴보겠습니다. 혹 피드백이 있다면 댓글 달아주세요.

 

1. 상황

2. 해결

 

____

상황

서버에서 아래와 같이 전체 선수목록을 받아온다.

var players = [
	{team: 'Paris', name: 'Messi', price: 100}
	, {team: 'Paris', name: 'Neymar', price: 120}
	, {team: 'Tottenham', name: 'Kane', price: 150}
	, {team: 'Bayern', name: 'Lewandowski', price: 100}
	, {team: 'Paris', name: 'Mbappe', price: 190}
	, {team: 'Tottenham', name: 'Son', price: 140}
	, {team: 'Barcelona', name: 'De Jong', price: 120}
];

 

이를 팀별로 다음과 같이 그룹화하고자 한다.

var playersByTeam = {
	Paris: {Messi: 100, Neymar: 120, Mbappe: 190}
	, Tottenham: {Kane: 150, Son: 140}
	, Bayern: {Lewandowski: 100}
	, Barcelona: {De Jong: 120}
};

 

 

해결

var playersByTeam = new Object();
for (var i =0, len = players.length; i < len; i++) {
	if (playersByTeam[players[i].team] === undefined) { // [1]
		playersByTeam[players[i].team] = new Object();
	}
	playersByTeam[players[i].team][players[i].name] = players[i].price;
}

 

____

1. 이 조건문이 없다면, 반복이 돌 때마다 새로운 객체로 덮어씌워지므로 팀당 선수가 하나만 존재하게 된다.

2. forEach를 사용할 수도 있다.

var playersByTeam = {};
players.forEach(player => {
    if (playersByTeam[player.team] === undefined)
        playersByTeam[player.team] = {};
    playersByTeam[player.team][player.name] = player.price;
});