AngulaJS JSON 형태의 데이터에서 필요한 값 찾아 들어가는 방법

북마크 추가

success(function(response) {

$scope.applicationList = response.apps;

현재 $scope.applicationList 가 가지고 있는 데이터는 아래와 같습니다.

[

  1. {
    • "reg_dttm":{
      • "date":18,
      • "day":1,
      • "hours":20,
      • "minutes":57,
      • "month":7,
      • "nanos":433109000,
      • "seconds":23,
      • "time":1408363043433,
      • "timezoneOffset":-540,
      • "year":114
      },
    • "modelname":"Olleh-vFirewall",
    • "icon_small":"/soweb/resources/catalog/image/firewall_logo_olleh.gif",
    • "neseq":2300,
    • "provisionseq":962,
    • "service_name":"Olleh-vFirewall",
    • "neclsseq":32,
    • "usgstatuscode":1,
    • "procstatecode":"7",
    • "necatseq":61,
    • "neusgcode":"9001",
    • "console_url":"https://221.145.180.73:10443/manage/dashboard",
    • "icon_large":"/soweb/resources/catalog/image/firewall_software_olleh.gif",
    • "cloudifyid":"b93c14e9-8e31-462a-92a7-c7722e382bf7",
    • "templateseq":1,
    • "config_props":{
      • "type":"json",
      • "value":"{\"applicationid\":\"f6decbbc-9c03-4404-92dc-5a99aeb09c93\",\"name\":\"Olleh-vFirewall\",\"necatseq\":61,\"neclsseq\":32,\"service\":[{\"item\":[{\"display_name\":\"\\uc5b4\\ub4dc\\ubbfc\\uacc4\\uc815 \\uc554\\ud638\",\"name\":\"admin_passwd\",\"value\":\"endian\"},{\"display_name\":\"\\ub8e8\\ud2b8\\uacc4\\uc815 \\uc554\\ud638\",\"name\":\"root_passwd\",\"value\":\"endian\"},{\"display_name\":\"\\ub3c4\\uba54\\uc778\\uba85\",\"name\":\"domainname\",\"value\":\"withnetworks.com\"},{\"display_name\":\"\\ud638\\uc2a4\\ud2b8\\uba85\",\"name\":\"hostname\",\"value\":\"withnetworks\"},{\"display_name\":\"\\uc7a5\\uce58\\uba85\",\"name\":\"modelname\",\"value\":\"Withnetworks_UTM\"},{\"display_name\":\"Green Zone IP\",\"name\":\"GREEN_ADDRESS\",\"value\":\"192.168.10.1\"},{\"display_name\":\"Green Zone Broadcast IP\",\"name\":\"GREEN_BROADCAST\",\"value\":\"192.168.10.255\"},{\"display_name\":\"Green Zone Network\",\"name\":\"GREEN_NETADDRESS\",\"value\":\"192.168.10.0\"},{\"display_name\":\"Green Zone Netmask\",\"name\":\"GREEN_NETMASK\",\"value\":\"255.255.255.0\"},{\"display_name\":\"ORANGE Zone IP\",\"name\":\"ORANGE_ADDRESS\",\"value\":\"192.168.20.1\"},{\"display_name\":\"ORANGE Zone Broadcast IP\",\"name\":\"ORANGE_BROADCAST\",\"value\":\"192.168.20.255\"},{\"display_name\":\"ORANGE Zone Network\",\"name\":\"ORANGE_NETADDRESS\",\"value\":\"192.168.20.0\"},{\"display_name\":\"ORANGE Zone Netmask\",\"name\":\"ORANGE_NETMASK\",\"value\":\"255.255.255.0\"},{\"display_name\":\"RED Zone IP\",\"name\":\"RED_ADDRESS\",\"value\":\"192.168.1.6\"},{\"display_name\":\"RED Zone Broadcast IP\",\"name\":\"RED_BROADCAST\",\"value\":\"192.168.1.255\"},{\"display_name\":\"RED Zone Network\",\"name\":\"RED_NETADDRESS\",\"value\":\"192.168.1.0\"},{\"display_name\":\"RED Zone Netmask\",\"name\":\"RED_NETMASK\",\"value\":\"255.255.255.0\"},{\"display_name\":\"Green Zone \\uc778\\ud130\\ud398\\uc774\\uc2a4\",\"name\":\"green_ifdesc\",\"value\":\"eth1\"},{\"display_name\":\"ORANGE Zone \\uc778\\ud130\\ud398\\uc774\\uc2a4\",\"name\":\"orange_ifdesc\",\"value\":\"eth2\"},{\"display_name\":\"RED Zone \\uc778\\ud130\\ud398\\uc774\\uc2a4\",\"name\":\"red_ifdesc\",\"value\":\"eth3\"}],\"name\":\"Olleh-vFirewall\"}]}"
      }
    }

] 

 

​이러한 형태의 데이터를 받아 왔습니다.

하지만 제가 필요한 데이터는 config_props -> value -> display_name, value(2가지) 의 데이터가 필요합니다.

AngularJS 는 JSON 형태의 데이터 접근 방식이 아주 간단합니다.

시작하는 지점이 {}형태가 아니고 [] 배열이기 때문에 지금은 하나를 가지고 있지만

{

"reg_dttm" : ~~~ 마지막

}

위와 같은 형태의 [{"reg_dttm" : },{"reg_dttm" : },{"reg_dttm" : }] 데이터가 여러개 있다고 가정하고 설명하겠습니다.

for(var i = 0 ; i < $scope.applicationList​.length ; i++){

var value = $scope.applicationList[i].config_props.value;

}

var value 의 데이터를 콘솔에 찍어보면 

 

"{\"applicationid\":\"f6decbbc-9c03-4404-92dc-5a99aeb09c93\",\"name\":\"Olleh-vFirewall\",\"necatseq\":61,\"neclsseq\":32,\"service\":[{\"item\":[{\"display_name\":\"\\uc5b4\\ub4dc\\ubbfc\\uacc4\\uc815 \\uc554\\ud638\",\"name\":\"admin_passwd\",\"value\":\"endian\"}, ~~~~ {\"display_name\":\"RED Zone \\uc778\\ud130\\ud398\\uc774\\uc2a4\",\"name\":\"red_ifdesc\",\"value\":\"eth3\"}],\"name\":\"Olleh-vFirewall\"}]}"

 

이러한 형태 입니다. value 라는 컬럼 안에 JSON 형태의 데이터를 String 형식으로 저장을 한것입니다.

String을 JSON으로 바꿔주는 함수가 있습니다. 바로 JSON.parse(); 입니다.

alert(); 로 실행시킬때 object 라고 나오기도 하는데 이러한 경우에는 JSON.stringify();​ 해결할 수 있습니다.

object 형태를 String 형태로 변환 해 주는 것입니다.

JSON.parse(value); 를 하면 아래와 같습니다. 

 

{"applicationid":"f6decbbc-9c03-4404-92dc-5a99aeb09c93","name":"Olleh-vFirewall","necatseq":61,"neclsseq":32,"service":[{"item":[{"display_name":"어드민계정 암호","name":"admin_passwd","value":"endian"},{"display_name":"루트계정 암호","name":"root_passwd","value":"endian"},{"display_name":"도메인명","name":"domainname","value":"withnetworks.com"}, ~~~ {"display_name":"RED Zone 인터페이스","name":"red_ifdesc","value":"eth3"}],"name":"Olleh-vFirewall"}]}

 

보시는 거와 같이 Key 와 값 앞에 붙어있던 \가 사라지게 되었습니다. 이렇게 JSON 형태로 변경을 한뒤 다시 접근해 보도록 하겠습니다.

for(var i = 0 ; i < $scope.applicationList​.length ; i++){

var service = JSON.parse($scope.applicationList[i].config_props.value).service

for(var k = 0 ; k < service.length ; k++){ // service 는 [] 배열이기 때문이다.

var item = service[k].item;

for(var x = 0; x < item.length ; x++){ // item 은 [] 배열 이기 때문이다.

$scope.items.push({

display_name : item[x].display_name,

value : item[x].value

});

}

}

} 

이상입니다. 읽어 주시느냐고 고생하셨습니다.

 

 

 

김만구
2014-08-19 11:23
SHARE
keyboard_arrow_left
keyboard_arrow_up