[javascript]-객체(key,value) + forEach

1. json 데이터 내에서, value 가 숫자인 key 값들 출력 

< json 데이터 >

 

var data = {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
    },
    "image": { 
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
    },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
    }
}

 

*  data 객체의 image 키 값 출력 

//console.log(data["image"]); -> image 는 키값이므로 []로 접근시 "" 안에 작성 
console.log(data.image);

: Object {src: "Images/Sun.png", name: "sun1", hOffset: 250, vOffset: 250, alignment: "center"} 

 

* data객체의 image 객체의 src 출력 

console.log(data.image.src);

:Images/Sun.png

---

* 객체 탐색 : for in 문 사용

- 객체의 key 값들 출력 

[ for in 문은, key 값이 있는 것을 탐색하기 위한 목적으로, 배열보다 객체에서 사용]

for(value in data){
    console.log(value);
}

: debug

window

image

text

 

* 객체 탐색

- 객체의 key 값 반복으로, value 값들 출력 

for(key in data){
    console.log(data[key]); //-> 키값, 모든 value 출력 
    
    //console.log(key); -> key값들만 출력 
}

:on

Object {title: "Sample Konfabulator Widget", name: "main_window", width: 500, height: 500}

Object {src: "Images/Sun.png", name: "sun1", hOffset: 250, vOffset: 250, alignment: "center"}

Object {data: "Click Here", size: 36, style: "bold", name: "text1", hOffset: 250, …}

---

* 객체 탐색 - Object.keys

- (data) 의 키값 출력했더니 배열로 출력

console.log(Object.keys(data));

: Array(4) ["debug", "window", "image", "text"]

 

* 객체 탐색 - Object.keys

-> 배열로 출력되므로, 해당 배열에서 forEach로 루프, value 출력 

Object.keys(data).forEach(function(v){
    console.log(data[v]);
})

: on

Object {title: "Sample Konfabulator Widget", name: "main_window", width: 500, height: 500}

Object {src: "Images/Sun.png", name: "sun1", hOffset: 250, vOffset: 250, alignment: "center"}

Object {data: "Click Here", size: 36, style: "bold", name: "text1", hOffset: 250, …}

---

<결과>

var result =[];

for(key in data){
     var inner = data[key];
     //console.log(inner);
     for(key2 in inner){
         //console.log(inner[key2]); //value 출력 
         if(typeof(inner[key2]) == 'number'){
            result.push(key2);
         }
     }
}
console.log("result : "+result);

: result : width,height,hOffset,vOffset,size,hOffset,vOffset

---

2. json 데이터 중, type 이 "sk"인 element의 "name" 으로 구성된 배열 출력 

<json 데이터>

 

var data=[{
	"id": 1,
	"name": "Yong",
	"phone": "010-0000-0000",
	"type": "sk",
	"childnode": [{
		"id": 11,
		"name": "echo",
		"phone": "010-0000-1111",
		"type": "kt",
		"childnode": [{
				"id": 115,
				"name": "hary",
				"phone": "211-1111-0000",
				"type": "sk",
				"childnode": [{
					"id": 1159,
					"name": "pobi",
					"phone": "010-444-000",
					"type": "kt",
					"childnode": [{
							"id": 11592,
							"name": "cherry",
							"phone": "111-222-0000",
							"type": "lg",
							"childnode": []
						},
						{
							"id": 11595,
							"name": "solvin",
							"phone": "010-000-3333",
							"type": "sk",
							"childnode": []
						}
					]
				}]
			},
			{
				"id": 116,
				"name": "kim",
				"phone": "444-111-0200",
				"type": "kt",
				"childnode": [{
					"id": 1168,
					"name": "hani",
					"phone": "010-222-0000",
					"type": "sk",
					"childnode": [{
						"id": 11689,
						"name": "ho",
						"phone": "010-000-0000",
						"type": "kt",
						"childnode": [{
								"id": 116890,
								"name": "wonsuk",
								"phone": "010-000-0000",
								"type": "kt",
								"childnode": []
							},
							{
								"id": 1168901,
								"name": "chulsu",
								"phone": "010-0000-0000",
								"type": "sk",
								"childnode": []
							}
						]
					}]
				}]
			},
			{
				"id": 117,
				"name": "hong",
				"phone": "010-0000-0000",
				"type": "lg",
				"childnode": []
			}
		]
	}]
}]

 

<결과>

var result=[];

function search(array, result){
    array.forEach(element => {
       
        if(element.type === "sk"){
             result.push(element.name);
        }
        if(element.childnode){
           search(element.childnode, result);
        }
})
}

search(data, result);
console.log(result);

---

+ forEach 

: 자바스크립트 Array 객체의 메소드 forEach 는 for 문과 마찬가지로, 반복적인 탐색을 위해 사용한다.  : for  문과 달리, index와 조건식, 증감식 없이, callback 함수를 통해 기능을 수행한다.

 

1. 배열.forEach(callback)

const arr=[1,2,3,4,5,6,7,8,9];

arr.forEach(function(element){
    console.log(element);
})

또는, arrow 함수형태로 가능 

const arr=[1,2,3,4,5,6,7,8,9];

arr.forEach(element => console.log(element));

---

2. forEach 에서 callback 함수의 결과물 

const arr=[1,2,3,4,5,6,7,8];
var result =[];

arr.forEach(function(element){
    if(element%2 !=0){
        result.push(element);
    }
});

console.log(result);

: forEach 는 return 이 없으므로, 결과물을 만들기 위해서는 함수 밖의 변수를 사용해야 한다. 

---