[Node.js] - XMLHttpRequest / JSON.parse()로 변환된 JSON객체가 담긴 배열 구조

XMLHttpRequest는 자바스크립트에서 Ajax를 사용할때 사용되는 객체이다.

var request = new XMLHttpRequest();

request.open('get','/data.json',true);
request.send();

XMLHttpRequest객체의 open() 메서드에 전송방식, 전송위치, sync방식을 지정해준다.

3번째 매개변수의 true속성을 통해 sync를 비동기방식으로 설정하여 Ajax 데이터 전송을 진행하였다.

 

var request = new XMLHttpRequest();
request.onreadystatechange = function(event){
    if(request.readyState == 4){
        if(request.status == 200){
            console.log(request.responseText)
        }
    }
}               
request.open('get','/data.json',true);
request.send();

비동기 방식으로 데이터를 전송한 후 응답받기 위해서는 일반적인 동기방식으로는 받지 못한다.

onreadystatechange 이벤트 리스너를 연결하여 readyState를 확인하고 데이터가 올바르게 받아졌을 때 동작하도록 설정해줘야한다.

 

동기방식은 일반적으로 readyState가 1, 4 만 실행된다.

비동기방식의 readyState는 1, 2, 3, 4 순차적으로 실행된다.

 

확실히 readyState 상태에 차이가 있지만 동기방식의 코드에서 true(비동기)값이 실행 되지않는 정확한 원인은 모르겠다.

따라서 위의 코드처럼 onreadystatechange 이벤트 리스너를 통해 상태를 확인하고 4번일 경우 실행하도록 구현해야한다.

 

 

다음 사진은 request.responseText에 담긴 JSON형태의 데이터이다.

JSON형식의 데이터가 배열에 담겨있지만 해당 데이터의 타입은 문자열 텍스트이다.

따라서 자바스크립트 객체형태로 변환해야한다.

(자바스크립트 객체는 JSON이다.)

var json = JSON.parse(request.responseText)

JSON.parse() 함수를 통해 문자열 텍스트 형식의 전달받은 JSON데이터를 JSON형태로 파싱한다.

 

var request = new XMLHttpRequest();
request.onreadystatechange = function(event){
    if(request.readyState == 4){
        if(request.status == 200){
            console.log(request.responseText)
            var json = JSON.parse(request.responseText)
        }
    }
}               
request.open('get','/data.json',true);
request.send();

코드를 실행하면 다음과같이 배열 형태로 변환된 JSON 데이터를 확인할 수 있다.

배열에는 배열인덱스 : Object 형태로 데이터가 담겨져있다.

해당 형태는 for문으로 추출해야한다.

for in문 기본for문 forEach문 모두 가능하다.

 

우선 for in 문으로 추출해보도록 한다.

[ FOR IN ]

var json = JSON.parse(request.responseText)

for (var object in json){
    console.log("json",json)
    console.log("object",object)
}

 

코드를 실행하면 위와과 같은 형태로 데이터가 출력된다.

 

json으로부터 추출한 데이터는 배열의 index 즉, 배열에 담겨있는 object 키가 된다.

배열에서 추출하기 전까지 배열 내에 담겨있는 객체 형태는 { 0: {name: '우유', price: '2000'} }와 같이 object로 묶여있는것이다.

따라서 json은 배열상태이고 object는 배열의 n(index)번째 요소가 된다.

우리는 이 object변수를 통해 json이라는 배열객체에 접근한다.

var json = JSON.parse(request.responseText)

for (var object in json){
    console.log("json[object",json[object])
}

위와 같은 형태로 데이터가 출력된다. 

json[object]

따라서 위의 형태로 JSON 배열 객체에 접근한다.

 

2중 for in 문은 다음과 같다

    for(var key in json[object]){
    }

json[object]로 추출한 object객체로부터 다시 value 즉 name과 price 속성 그자체 이름인 key값을 추출하는 반복문이다.

 

var json = JSON.parse(request.responseText)

for (var object in json){
    for(var key in json[object]){
        console.log(json[object][key])
    }
}

위의 코드를 실행하면 아래와같은 결과가 출력된다.

json[object][key]

형태는 key값(name,price)에맞는 각각의 value에 해당하는 데이터들에 접근한다.

 

var json = JSON.parse(request.responseText)

for (var object in json){
    for(var key in json[object]){
        output += '<h1>' + key + ':' + json[object][key] + '</h1>';
    }
}

코드를 실행하면 아래와 같이 데이터를 출력한다.

다음은 완성된 코드이다

 

function createRequest(){
    var request;
    try{
        return new XMLHttpRequest();
    }catch(exception){
        var versions = [
            'Msxml2.XMLHTTP.6.0'
            ,'Msxml2.XMLHTTP.5.0'
            ,'Msxml2.XMLHTTP.4.0'				
            ,'Msxml2.XMLHTTP.3.0'
            ,'Msxml2.XMLHTTP'
            ,'Microsoft.XMLHTTP'
        ];
        for (var i = 0; i < versions.length; i++){
            try{
                return new ActiveXObject(versions[i]);
            }catch(e){}
        }
    }
}
    var request = createRequest();
    request.onreadystatechange = function(event){
        console.log(request.readyState)
        if(request.readyState == 4){
            if(request.status == 200){
                var json = JSON.parse(request.responseText)
                    var output = '';
                    for (var object in json){
                        for(var key in json[object]){
                            output += '<h1>' + key + ':' + json[object][key] + '</h1>';
                        }
                    }
                }		
            document.body.innerHTML += output;
        }
    }
} 
		
request.open('get','/data.json',true);
		
request.send();

 

[ 기본 FOR문 ]

var json = JSON.parse(request.responseText)
var output = '';
for (var i = 0; i < json.length; i++){
    for( var key in json[i]){
        output += '<h1>' + i + ':' + json[i][key] + '</h1>';
    }
}

첫번째 for문의 형태를 보면 json배열의 길이 만큼 반복한다.

배열은 총 0번째 1번째 2번째 인덱스를 갖는 3가지의 object를 담고 있으므로 길이는 3이다.

 

두번째 for문은 index를 통해 접근한다.

첫번째 반복문의 i값을 json배열의 index로 사용하여 순차적으로 key값을 꺼낸다.

추출한 key값을통해 json[i] 데이터의 각각의 key에 접근하여 반복한다.

 

이외에도 여러 방법이 있다.

 

https://lts0606.tistory.com/269

Javascript json array loop, for (자바스크립트 json 배열 반복문)