javascript 동적으로 객체 속성 넣어 생성하기

차트를 그리다 보면 카테고리나 값을 넣어줘야 할 경우가 있다.

 

이때 데이터는 가변적이기 때문에 그에 맞춰서 입력되어야 한다.

 

이를 해결하기 위해서는 동적으로 데이터를 만들어서 넣어 줘야 한다.

var arr = ['test1', 'test2', 'test3'];
var obj = {};

arr.forEach(function(e){
	obj[e] = 0;
});

 

그래서 생각해낸 방법이 객체를 통해서 데이터를 관리하는 것이다.

 

위 예제를 보면 obj에는 아무것도 담겨있지 않지만 forEach문에서

 

arr에 담겨있는 값을 속성으로 obj에 추가해 준다

 

{test1: 0, test2: 0, test3: 0}

그럼 출력 결과는 이렇다.

 

이처럼 값을 받아와서 특정 값의 개수나 합계를 구할 때 유용하다.

 

---

 

배열 안 데이터 개수 구하기

 

var arr = ['test1', 'test2', 'test3', 'test3', 'test3', 'test2'];
var obj = {};

arr.forEach(function(e){
	if(obj[e] == undefined){
		obj[e] = 1;
    }else{
    	obj[e] += 1;
    }
});

{test1: 1, test2: 2, test3: 3}

 

 

배열 안 데이터 값 합계 구하기

(배열 안 객체의 속성이 모두 동일할 때)

var arr = [{test1:1, test2:1, test3:1},{test1:2, test2:3, test3:4},{test1:5, test2:6, test3:7},{test1:8, test2:9, test3:10},{test1:11, test2:12, test3:13}]
var obj = {}

for(key in arr[0]){
	obj[key] = 0;
}

arr.forEach(function(e){
	for(key in e){
		obj[key] += e[key]
    }
})

{test1: 27, test2: 31, test3: 35}

---

배열 안 데이터 갯수와 값의 합계 구하기

(배열 안 객체의 속성이 예측 불가능할 때)

var arr = [{test1:1, test2:1, test3:1},{test4:2, test2:3, test5:4},{test7:5, test1:6, test4:7},{test9:8, test5:9, test2:10},{test1:11, test4:12, test3:13}]
var obj = {}

arr.forEach(function(e){
	for(key in e){
    	if(obj[key] == undefined) obj[key] = {count: 0, val:0};
        obj[key].count++;
        obj[key].val += e[key];
    }
})

{test1: {…}, test2: {…}, test3: {…}, test4: {…}, test5: {…}, …}
test1: {count: 3, val: 18}
test2: {count: 3, val: 14}
test3: {count: 2, val: 14}
test4: {count: 3, val: 21}
test5: {count: 2, val: 13}
test7: {count: 1, val: 5}
test9: {count: 1, val: 8}