JavaScript JSON 활용 예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step10_example2.html</title>
</head>
<body>
<button id="showBtn">목록보기</button>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 원격지 서버로 부터 받아온 json 문자열이라고 가정
const data = `[
{"num":1, "name":"김구라", "addr":"노량진"},
{"num":2, "name":"해골", "addr":"행신동"},
{"num":3, "name":"원숭이", "addr":"상도동"}
]`;
// 목록보기 버튼을 눌렀을때 회원 목록을 tbody에 출력해 보세요.
document.querySelector("#showBtn").addEventListener("click", ()=>{
const arr = JSON.parse(data);
for (let i=0; i<arr.length; i++) {
let msg = []
msg[i] = `
<tr>
<td>${arr[i].num}</td>
<td>${arr[i].name}</td>
<td>${arr[i].addr}</td>
</tr>
`;
document.querySelector("tbody").insertAdjacentHTML("beforeend", msg[i]);
}
});
</script>
</body>
</html>
위 코드는 "목록보기" 버튼을 클릭하면 data에 담겨있는 JSON 문자열의 데이터를
tbody에 td행을 추가하여 출력해주는 기능을 가진 코드이다.
document.querySelector("#showBtn").addEventListener("click", ()=>{
const arr = JSON.parse(data);
for (let i=0; i<arr.length; i++) {
let msg = []
msg[i] = `
<tr>
<td>${arr[i].num}</td>
<td>${arr[i].name}</td>
<td>${arr[i].addr}</td>
</tr>
`;
document.querySelector("tbody").insertAdjacentHTML("beforeend", msg[i]);
}
});
showBtn 을 클릭하면 동작하는 이벤트 리스너를 만들었고
JSON형식의 data을 arr라는 변수에 object으로 변환시켜서 저장하였다.
for (let i=0; i<arr.length; i++) {
let msg = []
msg[i] = `
<tr>
<td>${arr[i].num}</td>
<td>${arr[i].name}</td>
<td>${arr[i].addr}</td>
</tr>
`;
document.querySelector("tbody").insertAdjacentHTML("beforeend", msg[i]);
}
그 후 반복문을 실행하여 msg라는 배열안에 arr의 object 를 담고 arr의 갯수만큼 반복실행하도록 코드를 작성하였다.
목록보기를 클릭하면
arr에 있던 데이터가 추가된 모습을 볼 수 있다.
'JavaScript' 카테고리의 다른 글
| JavaScript localStorage 활용 예제 (2) (0) | 2023.05.19 |
|---|---|
| JavaScript localStorage 활용 예제 (0) | 2023.05.18 |
| JavaScript JSON (0) | 2023.05.15 |
| JavaScript canvas 함수(9) (0) | 2023.05.12 |
| JavaScript canvas 함수(8) (0) | 2023.05.11 |
