-
json 파서를 이용한 파싱javascript ES5 정리 2020. 9. 22. 01:56
공공데이터를 불러오면 다음과 같이 json 데이터가 문자열 형식으로 날라온다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var data = '{id:"oh",pw:23}'; console.log(data.id); </script> </body> </html>문자열 형식으로 객체를 생성했기때문에 data.id를 콘솔에 찍어도 데이터값이 제대로 출력되지않는다.
이때
우리는 저 문자열을 객체화 시키기위해 다음과 같이 파싱작업을 해야한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var data = JSON.parse('{id:"oh",pw:23}'); console.log(data.id); </script> </body> </html>어?
그런데 에러가 발생한다.
그 이유는 객체의 키값을 문자열 형식으로 제대로 작성하지않았기때문이다.
var data = JSON.parse('{id:"oh",pw:23}');
수정
var data = JSON.parse('{"id":"oh", "pw":23}');
다음과 같이 키값을 문자열 형식으로 제대로 기입하면 데이터가 정상적으로 출력이 된다.
하지만 이러한 과정이 너무 귀찮다.
자동으로 키값에 쌍 따옴표를 붙여주는 기능이 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var data = JSON.parse('{"id":"oh", "pw":23}'); console.log(data.id); console.log(data.pw); ///////////이 기능 var data2 = {id:"my", pw:23}; var json = JSON.stringify(data2); console.log(json); ////////// </script> </body> </html>JSON의 stringify메서드를 사용하면 data2객체의 키값을 {"id":"my","pw":23} 이렇게 변경시켜준다.
'javascript ES5 정리' 카테고리의 다른 글
js 함수 (0) 2020.09.22 js ===, !== 연산자 (0) 2020.09.22 js 데이터객체, json 표기법 (0) 2020.09.22 js - object 객체 (0) 2020.09.22 js 배열 (0) 2020.09.22