JavaScript/JSON
간단한 json
성장코딩
2023. 2. 2. 12:05
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
let str = '{"name":"홍길동", "age":24, "address":"서울시"}' // string
// alert(str)
// string -> json 이를 parsing이라고 함
// let json = JSON.parse(str); // json으로 만들어줌(parsing)
// alert(json)
// document.getElementById("demo").innerHTML = json.address; // json(객체).address(key값)
let json = [
{
"name":"홍길동",
"age":24,
"height":172.2
},
{
"name":"성춘향",
"age":16,
"height":156.9
},
{
"name":"일지매",
"age":22,
"height":181.3
},
];
document.getElementById("demo").innerHTML = json[1].name + " " + json[1].height;
// 성춘향 156.9
</script>
</body>
</html>
|
cs |
NBAjson.json이라는 파일을 가져와서 원하는 값들에 접근해보도록 하자.
NBAjson.json 파일은 아래와 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
{
"quiz": {
"sport": {
"q1": {
"question": "Which one is correct team name in NBA?",
"options": [
"New York Bulls",
"Los Angeles Kings",
"Golden State Warriors",
"Huston Rocket"
],
"answer": "Huston Rocket"
}
},
"maths": {
"q1": {
"question": "5 + 7 = ?",
"options": [
"10",
"11",
"12",
"13"
],
"answer": "12"
},
"q2": {
"question": "12 - 8 = ?",
"options": [
"1",
"2",
"3",
"4"
],
"answer": "4"
}
}
}
}
|
cs |
위 파일을 활용하여,
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<span id="sport1"></span><br>
<span id="sport2"></span>
<br><br>
<span id="q1a"></span><br>
<span id="q1b"></span>
<br><br>
<span id="q2a"></span><br>
<span id="q2b"></span>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(xhttp.readyState == 4 && xhttp.status == 200){
nbaFunc(this.responseText); // responseText는 문자열로 데이터를 받는다.
}
}
xhttp.open("GET", "NBAjson.json", true);
xhttp.send();
function nbaFunc(resp){
// json으로 parsing
let json = JSON.parse(resp); // string -> json
// let str = JSON.stringify(json) // json -> string
// sport의 question에 접근
document.getElementById('sport1').innerHTML = "Question: " + json.quiz.sport.q1.question + " ";
document.getElementById('sport2').innerHTML = "Answer: " + json.quiz.sport.q1.options[3];
// 위 코드를 아래와 같이 사용할 수 있다. (quiz.sport 대신 quiz["sport"])
// document.getElementById('sport2').innerHTML = "Answer: " + json.quiz["sport"].q1.options[3];
// maths의 q1에 접근
document.getElementById('q1a').innerHTML = "Question: " + json.quiz.maths.q1.question;
document.getElementById('q1b').innerHTML = "Answer: " + json.quiz.maths.q1.options[2];
// maths의 q2에 접근
document.getElementById('q2a').innerHTML = "Question: " + json.quiz.maths.q2.question;
document.getElementById('q2b').innerHTML = "Answer: " + json.quiz.maths.q2.options[3];
}
</script>
</body>
</html>
|
cs |
결과는 다음과 같다.
<영화 5편에 대한 제목, 평점, 개봉일, 감독에 대한 정보를 나타낸 표 만들기>
먼저, json 파일을 살펴보면,
movie.json
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
[
{
"title":"아바타",
"score":8.83,
"openday":"2022.12.14",
"director": "제임스 카메론"
},
{
"title":"범죄도시2",
"score":9.00,
"openday":"2022.05.18",
"director": "이상용"
},
{
"title":"극한직업",
"score":9.20,
"openday":"2019.01.23",
"director": "이병헌"
},
{
"title":"어벤져스",
"score":9.50,
"openday":"2019.04.24",
"director": "안소니 루소"
},
{
"title":"명량",
"score":8.88,
"openday":"2014.07.30",
"director": "김한민"
}
]
|
cs |
테이블을 작성하는 코드는 아래와 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="movies">
</div>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200){
movieFunc( this );
}
}
xhttp.open("GET", "movie.json", true);
xhttp.send();
function movieFunc( resp ) {
let jsonDoc = resp.responseText;
// alert(jsonDoc);
let json = JSON.parse(jsonDoc); // parsing
// alert(json);
let table = "<table border='1'>";
table += "<col width='50'><col width='100'><col width='80'><col width='100'><col width='140'>";
table += "<tr>";
table += "<th>번호</th>";
for(key in json[0]){
table += "<th>" + key + "</th>";
}
table += "</tr>";
// datas
for(i = 0;i < json.length; i++){
table += "<tr>";
table += "<th>" + (1 + i) + "</th>";
// 아바타에 대한 정보만 나옴
// table += "<td>" + json[0].title + "</td>";
// table += "<td>" + json[0].score + "</td>";
// table += "<td>" + json[0].openday + "</td>";
// table += "<td>" + json[0].director + "</td>";
for(key in json[i]){
table += "<td>" + json[i][key] + "</td>";
}
table += "</tr>";
}
table += "</table>";
document.getElementById("movies").innerHTML = table;
}
</script>
</body>
</html>
|
cs |
그 결과는
