JSON을 처음 접하게 되면 이 JSON으로 뭐 정보를 저장해놓고 사용한다는 것은 알겠는데 정확히 JSON 정보를 어떻게 불러오고 쓰는지 알지 못하기 마련이다. 그래서 이번에는 JSON에 정보를 담고 index.html파일을 만들어 JSON에 있는 정보를 index.html상에 표현해보려 한다. 이를 JSON 파싱 이라고 한다.
파싱(parsing)??
- 컴퓨터 과학에서는 파싱을 일련의 문자열을 의미있는 토큰(token)으로 분해하고 이들로 이루어진 파스 트리(parse tree)를 만드는 과정을 말한다.
- 즉, 컴퓨터의 JSON, XML, HTML 등으로 구성된 데이터를 분석하여 내가 원하는 부분만 추출하고자 하는 것을 말한다.
이번 포스트에서는 JSON의 데이터를 파싱하여 JSON 파일 안의 'data'를 얻어내 웹 사이트 상에 표로 표현해 보고자 한다.
JSON 데이터 만들기
generatedata.com에 들어가 보자. 우리가 직접 많은 양의 데이터를 치고 있을 수는 없으니 데이터를 이 사이트를 활용해서 만들어볼 것이다.
그럼 이런 창을 볼 수 있다. 이제 값을 입력해보자.
제목은 원하는 제목을 입력해주고(필자는 people로 입력했다.) COUNTRY-SPECIFIC DATA에서 South Korea를 선택해 넣어주자. DATA SET은 위 사진처럼 설정해주고 밑에 EXPORT TYPES에서 JSON을 선택한다. 그리고 우측 하단의 Generate버튼을 눌러주면
이렇게 JSON으로 된 코드로 정보를 만들어 준다. 이걸 전체 다 복사해두자.
코드 작성하기
폴더를 하나 만들어서 안에 index.html파일과 people.json파일을 생성하고 people.json 안에 복사해둔 코드를 다 붙여 넣어준다.
people.json
{
"data": [
[
"Talon",
"052-158-5329",
"pede.malesuada.vel@at.net",
"Ut Semper Pretium Corporation"
],
[
"Hector",
"041-651-4084",
"eu@lobortistellus.org",
"Curabitur Corp."
],
[
"August",
"063-061-9053",
"erat.eget.ipsum@parturientmontes.ca",
"Risus Duis A Industries"
],
[
"Ulysses",
"044-697-6622",
"consequat.dolor.vitae@egetvarius.com",
"Rutrum Eu Corp."
],
[
"Ian",
"053-006-6831",
"diam@aliquetlobortisnisi.com",
"Et Inc."
],
[
"Brandon",
"033-049-7314",
"lacus.Quisque@dapibusgravida.org",
"Facilisis Incorporated"
],
[
"Jarrod",
"051-973-3172",
"Quisque.imperdiet@nasceturridiculus.co.uk",
"Dolor Dolor Tempus Incorporated"
],
[
"Beck",
"064-444-7876",
"magna.Suspendisse.tristique@iaculisquispede.edu",
"Et Ultrices Posuere Corp."
],
[
"Salvador",
"052-878-5773",
"vel@pharetra.net",
"A Enim Institute"
],
[
"Abdul",
"042-049-9037",
"ipsum.leo@euismodest.net",
"Dignissim Maecenas Ornare Inc."
],
[
"Ralph",
"051-887-1243",
"mollis@acnulla.net",
"Luctus Felis Incorporated"
],
[
"Dane",
"031-583-9047",
"vitae@lacus.com",
"Ut Odio Vel Corporation"
],
[
"Griffith",
"033-072-3647",
"interdum@tinciduntnunc.net",
"Ornare Egestas Ligula Inc."
],
[
"Ferdinand",
"032-044-2969",
"scelerisque.dui@egetipsumDonec.com",
"Cursus Luctus Ipsum Industries"
]
.
.
.
.//너무 많아서 생략함
]
}코드 맨 윗줄에 있는 "cols"는 딱히 필요없어서 지웠다.
//바로 이 코드
"cols": [
"fd",
"sdf",
"sd",
"sdf"
],이제 html파일을 작성해보자.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSON!!</title>
<style>
table {
border-collapse: collapse;
}
td {
border:1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Company</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Name</td>
<td>Phone</td>
<td>Email</td>
<td>Company</td>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</body>
</html><table>을 만들어서 <tbody>안에 JSON에 있는 정보가 표처럼 출력되게 해 볼 생각이다. 일단 column의 제목이 되는 <thead>를 위와 같이 채워주고 표 맨 밑에 출력되는 <tfoot>을 적어주었다. 마크업 작업은 여기까지 하고 </body>바로 위에 <script>를 추가해보겠다.
scipt
<script>
let xhttp = new XMLHttpRequest();
xhttp.open("GET", "people.json", true);
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
let storage = JSON.parse(this.response);
for(i in storage.data) {
let tr = document.createElement('tr');
for(let j = 0; j < 4; j++) {
let td = document.createElement('td');
td.innerHTML = storage.data[i][j];
tr.appendChild(td);
}
document.querySelector("tbody").appendChild(tr);
}
}
};
xhttp.send();
</script>JSON을 파싱하는 과정은 <script>안에 담겨있다. 서버와 통신하기 위해서 XMLHttpRequest객체를 사용해야 한다. 이 객체를 사용해서 JSON, XML, HTML, 일반 텍스트 등 다양한 포맷을 주고 받을 수 있다.
let xhttp = new XMLHttpRequest();//xhttp라는 변수에 XMLHttpRequest객체를 할당했다.서버에게 정보 요청을 하기 전에 요청에 대해 어떤일을 수행하면 되는지에 대해 적어줘야하는데 그 내용은 밑의 함수안에 작성해주면 된다.
xhttp.onreadystatechange = function(){
// 서버의 응답에 따른 로직을 여기에 작성합니다.
};이 내용이 잘 이해가 안간다면 참고1과 참고2를 확인해보자.
그래도 모르겠으면 댓글로..
JSON파일 안에 있는 data정보를 가져와 <table>의 형식에 맞게 집어넣어야 되므로 다음과 같은 과정을 함수로 입력해 준다.
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
//readyState가 4라는 것은 요청에 대한 준비가 되었고 응답할 준비가 되었다는 말이다.
//status가 200이라는 것은 http응답 코드가 200이라는 것이다.
let storage = JSON.parse(this.response);
//response메소드를 통해 JSON 파일에 접근할 수 있다.
//잘 이해가 안된다면 console.log(this.response)를 대신 넣어서 무엇이 출력되는지 보자
for(i in storage.data) {//JSON파일 안에있는 data를 처음부터 끝까지 읽는 과정이다.
let tr = document.createElement('tr');//tr태그를 만들고
for(let j = 0; j < 4; j++) {
//한 사람당 정보가 이름, 전화번호, 이메일, 회사 이렇게 4개 있다.
//따라서 4번 반복하는 for문을 만들어 각각 td태그에 넣어주자.
let td = document.createElement('td');
td.innerHTML = storage.data[i][j];//i번째 사람의 j(이름, 전화번호 등)정보
tr.appendChild(td);
//tr태그에 차례대로 붙여준다.
}
document.querySelector("tbody").appendChild(tr);//tbody안에 또 붙여준다.
}
}
};위에 보면 this.readyState == 4를 볼 수 있는데 readystate는 0~4까지의 숫자로 상태를 알려준다.
- 0 (uninitialized) - (request가 초기화되지 않음)
- 1 (loading) - (서버와의 연결이 성사됨)
- 2 (loaded) - (서버가 request를 받음)
- 3 (interactive) - (request(요청)을 처리하는 중)
- 4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)
그리고 open()과send()를 사용해 서버로부터 정보 요청을 할 수 있다.
xhttp.open("GET", "people.json", true);//people.json을 여는 요청이다.
xhttp.send();//보내는 요청이다.이제 index.html을 실행시켜보면
다음과 같이 정보가 출력되는걸 볼 수 있다.
'JS' 카테고리의 다른 글
| [Vanilla/JavaScript]캘린더 만들기 (0) | 2020.12.18 |
|---|---|
| [JavaScript]투두 리스트 만들기 (0) | 2020.12.15 |
