자바스크립트 사용하여 json 데이터를 문자열 객체 변환하기

open api를 사용하다 보면 json 데이터를 많이 사용하게 된다. 웹화면에 json데이터를 표현하려면 문자열을 객체로 변환하기도 하고 객체를 문자로 변환해서 사용할 때가 있다. 물론 문자열 자체를 파싱하여 사용해도 상관은 없지만, 코드가 길어지고 복잡해진다. json같은 정형화된 데이터는 객체로 변환하여 사용하는 것이 편하다.

json 데이터 객체 문자열 변환

자바스크립트 사용하여
json 문자열 객체 변환하기

 

open api 로 화면을 잘 꾸미고 싶은데 문자열로 곤혹스러워 하는 분들도 있다.
물론, 변환만 할 수 있다면 그 다음은 어려운 것도 없다.
객체지향언어들의 특징은 메서드나 데이터나 점을 찍으면서 하위로 내려간다.
json 객체데이터 또한 점을 찍어 하위데이터로 내려가 접근을 할 수 있다.

 

json 데이터가 무엇인지 다시 확인해 보자

2021.03.16 - [programming/DataManage] - json 데이터 표현 규칙 이해하기

 

json 문자열 데이터를 객체로 변환하기

테스트 데이터를 준비한다.
요청을 했던, DB에서 이용했던, 어쨌든 json 문자열 데이터가 클라이언트인 웹브라우저로 넘어왔다는 것을 가정하는 것이다.
이것들은 개발자모드를 사용하면 차이를 바로 알 수 있다.

<script type="text/javascript">

  var jsonStr;
  var jsonObj;

  // 샘플 문자열 데이터
  var jsonSample = "{\"result\":{\"key_parent_data_1\":\"value_data_1\",\"key_parent_data_2\":\"value_data_2\",\"key_child_List_1\":[{\"key_child_data_11\":\"value_data_111\",\"key_child_data_12\":\"value_data_122\"},{\"key_child_data_11\":\"value_data_113\",\"key_child_data_12\":\"value_data_124\"}],\"key_child_List_2\":[{\"key_child_data_21\":\"value_data_211\",\"key_child_data_22\":\"value_data_221\"},{\"key_child_data_21\":\"value_data_213\",\"key_child_data_22\":\"value_data_224\"}]}}";

  // 샘플데이터 출력
  console.log("\n");
  console.log("샘플 문자열 데이터타입", typeof(jsonSample));
  console.log("샘플 문자열 값", jsonSample);

</script>

json 샘플 문자열 데이터

json 문자열 데이터를 객체로 변환하기 JSON.parse()

json 문자열을 객체로 변환하려면 JSON.parse() 를 사용하면 된다.
이 메서드는 문자열 데이터를 객체로 변환하여 사용할 수 있도록 해준다.
개발자모드에서 확인하면 위의 결과가 다르다는 것을 알 수 있다.

<script type="text/javascript">

	// json 문자열을 객체로 변경
    jsonObj = JSON.parse(jsonSample);

    console.log("\n");
    console.log("객체변환 데이터타입", typeof(jsonObj));
    console.log("객체변환 값", jsonObj);

</script>

json 샘플 객체 변환 데이터

json 객체 데이터를 문자열로 변환하기 JSON.stringify()

데이터를 객체로 변환하고 잘 사용한 후에 부분적으로 또는 전체로 다시 재가공하여 데이터를 전송하기 위해 문자열로 변환할 필요가 있다.
이 때는 JSON.stringify() 메서드를 사용한다.
이 때는 객체화된 데이터를 문자열로 변환할 수 있다.

<script type="text/javascript">

        // json 객체을 문자열로 변경
        jsonStr = JSON.stringify(jsonObj);

        console.log("\n");
        console.log("문자열변환 데이터타입", typeof(jsonStr));
        console.log("문자열변환 값", jsonStr);

</script>

json 샘플 문자열 변환 데이터

코드를 보면 알겠지만, 넘어온 데이터를 간단하게 변환하여 사용할 수 있음을 알 수 있다.

 

json 문자열을 객체로 변환하기 : JSON.parse()
json 객체를 문자열로 변환하기 : JSON.stringify()