18-2. JSON 오브젝트 / JSON 타입 파싱
parse()
구분 | 데이터(값) |
---|---|
object | JSON 오브젝트 |
파라미터 | 첫번째 파라미터: 변환 대상 두번째 파라미터: 파싱 데이터로 실행할 함수opt |
반환 | 변환 결과 |
JSON 타입을 JS 타입으로 변환
var value = "123"; try { var result = JSON.parse(value); } catch (e) { console.log("JSON 파싱 에러"); }; console.log(result); // 123 console.log(typeof result); // number
- JSON 형태는 기본적으로 큰따옴표 사용
- 즉, String 타입이지만 JSON.parse()에서 JS 타입에 맞도록 변환
- “123”은 문자열이지만 값이 숫자이므로 Number 타입의 숫자로 변환
- 파싱 대상이 서버에서 받은 데이터일 때, try-catch 사용은 필수입니다.
에러를 방지하기 위해 보험을 드는 느낌
var value = "true"; var result = JSON.parse(value); console.log(result); // true console.log(typeof result); // boolean
- “true”도 숫자처럼 true로 변환
- 설명 편의를 위해
try-catch
를 사용하지 않았으나
try-catch
사용은 필수입니다.
var value = '["ABC", "가나", "12"]'; var result = JSON.parse(value); console.log(result); // ["ABC", "가나", "12"]
- 배열에 작성된 String 타입의 숫자는 숫자로 변환하지 않습니다.
이 부분은 조금 신경을 쓰셔야됩니다.
파싱을 하면서 “12” 타입이 number냐고 물어보는 겁니다.
아니면 Number(), parseInt(), parseFloat() 등으로 number로 변환하는 겁니다. (그래야될 필요가 있으면)
보통 JSON은 배열 형태로 많이 작성합니다.
배열 안에 오브젝트를 담아 전달합니다.
오브젝트 하나만 전달하는 경우는 거의 없습니다.var value = '{"point": "123"}'; var result = JSON.parse(value); console.log(result); // {point: "123"}
- JS는 프포퍼티 이름에 큰따옴표를 사용하지 않으므로 큰따옴표가 표시되지 않음 (JS 타입으로 변환)
작성 주의
- “123.”을 “123.0”으로 작성
- “0123”처럼 첫 자리에 0 사용 불가
- 대문자 “NULL” 사용 불가, “null” 사용
- 10진수 사용 (다른 진수 사용 불가)
두번째 파라미터 작성
var data = '{"book": "책", "movie": "영화"}'; var check = function (key, value) { return key === "book" ? "JS책" : value; } var result = JSON.parse(data, check); console.log(result); // {book: "JS책", movie: "영화"}
- 프로퍼티 이름이 “book”이면 “책”을 “JS책”으로 바꿉니다.
첫번째 파라미터의 JSON 문자열을 파싱하면
- {book: “책”, movie: “영화”} 형태가 됩니다.
- 파싱한 오브젝트를 하나씩 읽어가면서 두번째 파라미터의 함수를 실행
- 함수에서 값을 반환하면 파싱 결과인 result 변수에 반영
- 값을 반환하지 않거나 undefined를 반환하면 프로퍼티가 제외되므로 반환해야 합니다.
이 부분 주의해야됩니다.
return 안시켜주는 건 그냥 해당 프로퍼티를 반환하면 되잖아?라고 생각했었는데 그렇게 안합니다.
그래서 변환 안시킬거면 value라도 반환해야됩니다.
이 부분 주의!!