Knockout.js는 자바스크립트 기반의 MVVM 패턴을 구현하기 위한 프런트엔드 프레임워크입니다. 데이터 그룹화 및 집계 처리는 많은 웹 애플리케이션에서 필요한 작업 중 하나입니다. 이번에는 Knockout.js에서 데이터를 그룹화하고 집계하는 방법에 대해 알아보겠습니다.
1. 데이터 그룹화
Knockout.js에서 데이터를 그룹화하기 위해서는 computed 속성과 ko.utils.arrayMap 함수를 사용할 수 있습니다.
아래는 예시 코드입니다.
// 그룹화할 데이터 배열
var data = [
{ name: "Alice", age: 25, gender: "female" },
{ name: "Bob", age: 32, gender: "male" },
{ name: "Charlie", age: 28, gender: "male" },
{ name: "Diana", age: 41, gender: "female" },
{ name: "Edward", age: 36, gender: "male" }
];
// 성별을 기준으로 데이터를 그룹화하는 computed 속성
var groupedData = ko.computed(function() {
var genders = ko.utils.arrayMap(data, function(item) {
return item.gender;
});
var uniqueGenders = ko.utils.arrayGetDistinctValues(genders);
var result = [];
ko.utils.arrayForEach(uniqueGenders, function(gender) {
var group = {
gender: gender,
members: ko.utils.arrayFilter(data, function(item) {
return item.gender === gender;
})
};
result.push(group);
});
return result;
});
// 그룹화된 데이터 출력
groupedData.subscribe(function(groups) {
console.log(groups);
});
위 코드에서는 data 배열을 성별로 그룹화한 groupedData computed 속성을 생성하고 있습니다. ko.utils.arrayMap 함수는 data 배열에서 성별만을 추출하여 새로운 배열로 만들어주고, ko.utils.arrayGetDistinctValues 함수로 중복되지 않은 성별 값만을 추출합니다. ko.utils.arrayForEach 함수로 각 성별을 기준으로 데이터를 필터링하여 result 배열에 그룹화된 데이터를 저장합니다. 마지막으로 groupedData에 대한 subscribe 메소드로 그룹화된 데이터를 출력합니다.
2. 집계 처리
Knockout.js에서 데이터를 집계하기 위해서는 ko.utils.arrayFilter와 ko.utils.arrayReduce 함수를 사용할 수 있습니다.
아래는 예시 코드입니다.
// 남성의 평균 나이를 계산하는 computed 속성
var maleAverageAge = ko.computed(function() {
var maleData = ko.utils.arrayFilter(data, function(item) {
return item.gender === "male";
});
var totalAge = ko.utils.arrayReduce(maleData, function(sum, item) {
return sum + item.age;
}, 0);
return totalAge / maleData.length;
});
// 남성의 평균 나이 출력
maleAverageAge.subscribe(function(averageAge) {
console.log(averageAge);
});
위 코드에서는 data 배열에서 남성 데이터만을 필터링하여 maleData 배열을 생성하고 있습니다. maleData 배열을 ko.utils.arrayReduce 함수로 나이의 합계를 계산하고, 이를 남성의 수로 나누어 평균 나이를 구합니다. 최종적으로 maleAverageAge에 대한 subscribe 메소드로 평균 나이를 출력합니다.