1. JSON.parse( )
- JSON을 사용하는 이유는 웹 서버와의 데이터를 교환하는 것입니다.
- 웹 서버에서 데이터를 수신할 때 데이터는 항상 문자열입니다.
- data를 분석하는 것은 JSON.parse( )를 사용합니다. 그래야 자바스크립트 객체로 데이터가 바뀝니다.
1) JSON 순수 데이터 타입 알아보기
## 예시 JSON 데이터
'{ "name" : "진", "age" : 31, "birth": 1992 }'- 웹 서버에서 이런 데이터를 가져왔다고 보도록 하겠습니다.
- 결국 데이터는 큰 문자열로 담겨서 오게 됩니다.
## JSON 데이터 타입 알아보는 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JSON parse()</title>
</head>
<body>
<script>
const originData = '{ "name" : "진", "age" : 31, "birth": 1992 }';
alert(typeof(originData));
</script>
</body>
</html>- 경고창에 JSON 데이터 타입을 알아보겠습니다.
## JSON 데이터 타입 알아보는 결과 보기
- 결과에 [ string ]이라고 뜨는 것이 확인됩니다.
2) JSON 문자열을 JS오브젝트로 변경
- 이번에는 JSON.parse() 메서드를 사용해서 문자열을 자바스크립트 오브젝트로 변경해보겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JSON parse()</title>
</head>
<body>
<script>
const originData = '{ "name" : "진", "age" : 31, "birth": 1992 }';
const changeData = JSON.parse(originData);
alert(typeof(changeData));
</script>
</body>
</html>
## 결과 보기
- [ object ]로 변경된 것이 확인됩니다.
3) JSON 데이터 일부 속성 호출
- 그럼 이제 데이터가 자바스크립트 객체로 바뀌었기 때문에 한 개씩 값을 호출할 수 있게 되었습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JSON parse()</title>
</head>
<body>
<h3>이름 : <span class="name"></span></h3>
<h3>나이 : <span class="age"></span></h3>
<h3>출생년도 : <span class="birth"></span>년</h3>
<script>
//JSON 데이터
const originData = '{ "name" : "진", "age" : 31, "birth": 1992 }';
const changeData = JSON.parse(originData);
//문서객체선택
const memberName = document.querySelector('.name');
const memberAge = document.querySelector('.age');
const memberBirth = document.querySelector('.birth');
//텍스트로 호출
memberName.textContent = changeData.name;
memberAge.textContent = changeData.age;
memberBirth.textContent = changeData.birth;
</script>
</body>
</html>- 각각의 <span> 태그에 클래스를 줘서 문서 객체로 선택하게 처리합니다.
- 데이터는 위에서처럼 JSON 데이터로 가져와서 JSON.parse() 를 통해 자바스크립트 객체로 바꿔줍니다.
- 각각의 문서 객체에 텍스트 콘텐츠로 데이터 속성을 호출해서 추가해줍니다.
## 결과 보기
- 데이터들이 잘 호출되는 것을 확인할 수 있습니다.
2. JSON.parse( ) 로 배열 데이터 가져오기
- JSON에서 배열로 데이터를 사용하는 경우 자바스크립트 객체 대신 배열로 값을 가져옵니다.
## JSON 데이터만 보기
'[ "진", "RM", "슈가", "제이홉", "지민", "뷔", "정국" ]';
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JSON parse()</title>
</head>
<body>
<ul id="bts"></ul>
<script>
//JSON 데이터
const originData = '[ "진", "RM", "슈가", "제이홉", "지민", "뷔", "정국" ]';
const changeData = JSON.parse(originData);
//문서객체선택
const bts = document.getElementById('bts');
//li태그를 담는 변수
let list = '';
//반복하여 li태그 처리
for(let i in changeData){
list += '<li>' + changeData[i] + '</li>';
}
bts.innerHTML = list;
</script>
</body>
</html>- 배열로 가져온 것은 객체가 아닌 배열로 되기 때문에 값을 선택할 때 배열명[인덱스번호] 로 선택해야 합니다.
- 위 데이터는 방탄소년단 멤버 이름을 JSON 데이터로 가져와서 JSON.parse() 를 통해 자바스크립트 배열로 바꿔줍니다.
- <ul> 태그 안에 작성할 <li> 태그를 담을 변수를 만들어 반복문을 통해 값을 담아줍니다.
- 그리고 태그를 인식하는 innerHTML 속성으로 처리해주면 됩니다.
## 결과 보기
- 그럼 리스트로 잘 들어가는 것이 확인됩니다.
3. JSON.parse( ) 예외 - 날짜
- 날짜 객체는 JSON에서 허용되지 않습니다.
- 그렇기 때문에 날짜를 문자열로 작성 후 자바스크립트에서 다시 [ new Date() ]를 통해 날짜로 생성해줘야 합니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JSON parse()</title>
</head>
<body>
<h3>출생 : <span class="test"></span></h3>
<script>
//JSON 데이터
const originData = '{ "name" : "진", "age" : 31, "birth": "1992-12-04"}';
const changeData = JSON.parse(originData);
//문서객체선택
const test = document.querySelector('.test');
//날짜형태로 변환
changeData.birth = new Date(changeData.birth);
//날짜 출력
test.textContent = changeData.birth;
</script>
</body>
</html>- 가져온 데이터를 다시 날짜 형태로 변환해줍니다.
changeData.birth = new Date(changeData.birth);- 바로 이 코드 파트입니다.
## 결과 보기
'웹언어 > JSON' 카테고리의 다른 글
| [JSON강좌] 6강 JSON Server(서버) - 오쌤의 니가스터디 (0) | 2022.11.21 |
|---|---|
| [JSON강좌] 5강 JSON.stringify() 메서드 - 오쌤의 니가스터디 (0) | 2022.11.17 |
| [JSON강좌] 3강 JSON 데이터 유형 - 오쌤의 니가스터디 (2) | 2022.11.11 |
| [JSON강좌] 2강 데이터형식 비교(JSON VS XML) - 오쌤의 니가스터디 (0) | 2022.11.10 |
| [JSON강좌] 1강 JSON 소개와 문법 - 오쌤의 니가스터디 (0) | 2022.11.08 |
