๐ ์ค์ฒฉ๋ JSON ๋ฐ์ดํฐ ๋ค๋ฃจ๊ธฐ
// ์ค์ฒฉ๋ JSON ๋ฐ์ดํฐ ๋ค๋ฃจ๊ธฐ.
// ํ ๊ถ์ ๋์ ์ ๋ณด๋ฅผ ๊ฐ๊ณ ์๋ JSON ๋ฐ์ดํฐ์์ ํด๋น ๋์๊ฐ ์ํด์๋ ์นดํ
๊ณ ๋ฆฌ๋ฅผ ์ถ๋ ฅํ์์ค.
const book = {
"isbn":"123-456-789",
"author":{
"name":"ํ๊ธธ๋",
"email":"hong@kildong.com"
},
"editor":{
"name":"์ด์์ ",
"email":"lee@soonsin.com"
},
"title":"๋ํ๋ฏผ๊ตญ",
"category":["non-fiction","it","politics"]
}
console.log(book["author"].name); //ํ๊ธธ๋
console.log(book["editor"].name); //์ด์์
console.log(book["isbn"]); //123-456-789
console.log(book.isbn); //123-456-789
console.log(book["title"]);
console.log(book.title);
console.log(book["category"]);
console.log(book.category);
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๐ JSON ๋ฐ์ดํฐ ์นํ์ด์ง์ ์ถ๋ ฅํ๊ธฐ
JavaScript ์ฝ๋
// ์ค์ฒฉ๋ JSON ๋ฐ์ดํฐ ๋ค๋ฃจ๊ธฐ.
// ํ ๊ถ์ ๋์ ์ ๋ณด๋ฅผ ๊ฐ๊ณ ์๋ JSON ๋ฐ์ดํฐ์์ ํด๋น ๋์๊ฐ ์ํด์๋ ์นดํ
๊ณ ๋ฆฌ๋ฅผ ์ถ๋ ฅํ์์ค.
const book = {
"isbn":"123-456-789",
"author":{
"name":"ํ๊ธธ๋",
"email":"hong@kildong.com"
},
"editor":{
"name":"์ด์์ ",
"email":"lee@soonsin.com"
},
"title":"๋ํ๋ฏผ๊ตญ",
"category":["non-fiction","it","politics"]
}
console.log(book["author"].name); //ํ๊ธธ๋
console.log(book["editor"].name); //์ด์์
console.log(book["isbn"]); //123-456-789
console.log(book.isbn); //123-456-789
console.log(book["title"]);
console.log(book.title);
console.log(book["category"]);
console.log(book.category);
//๊ฐ๋ณ ์ ๊ทผ
let book1 = "";
book1 = book.category[0];
//category ์์ด๋ ์ฐพ์์ ํด๋น ํ
์คํธ์ value ๊ฐ ์ง์ด๋ฃ๊ธฐ.
document.getElementById("category").innerText=book1;
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐHTML ์ฝ๋
<!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>๊ณต๊ณต ๋ฐ์ดํฐ API</title>
<script src="./json_02.js"></script>
</head>
<body>
<div id="category"></div>
</body>
</html>๐คทโ๏ธ ์ ํ๋ฉด์ ์๋์ฌ๊น?
1. HTML ์ฝ๋๋ฅผ ์์ ํด์ผ ํ๋ฉด ๋๋ค.
<!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>๊ณต๊ณต ๋ฐ์ดํฐ API</title>
</head>
<body>
<div id="category"></div>
<!-- body ๋ถ๋ถ์ด ๋ก๋๋ ๋ค์์ script ๋ถ๋ถ์ด ์คํ๋๋ค. -->
<script src="./json_02.js"></script>
</body>
</html>
2. JavaScript ์ฝ๋๋ฅผ ์์ ํ๋ ๋ฐฉ๋ฒ๋ ์๋ค.
HTML ์ฝ๋
<!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>๊ณต๊ณต ๋ฐ์ดํฐ API</title>
<script src="./json_02.js"></script>
</head>
<body>
<div id="category"></div>
</body>
</html>JavaScript ์ฝ๋
// ์ค์ฒฉ๋ JSON ๋ฐ์ดํฐ ๋ค๋ฃจ๊ธฐ.
// ํ ๊ถ์ ๋์ ์ ๋ณด๋ฅผ ๊ฐ๊ณ ์๋ JSON ๋ฐ์ดํฐ์์ ํด๋น ๋์๊ฐ ์ํด์๋ ์นดํ
๊ณ ๋ฆฌ๋ฅผ ์ถ๋ ฅํ์์ค.
// [1] : ์ค์ฒฉ ๋ฐ์ดํฐ
window.onload = () => { // body๊ฐ onload ๋์์ ๋ script ์ฝ๋๊ฐ ์คํ๋ ์ ์๋๋ก ํ๋ค.
const book = {
"isbn":"123-456-789",
"author":{
"name":"ํ๊ธธ๋",
"email":"hong@kildong.com"
},
"editor":{
"name":"์ด์์ ",
"email":"lee@soonsin.com"
},
"title":"๋ํ๋ฏผ๊ตญ",
"category":["non-fiction","it","politics"]
}
console.log(book["author"].name); //ํ๊ธธ๋
console.log(book["editor"].name); //์ด์์
console.log(book["isbn"]); //123-456-789
console.log(book.isbn); //123-456-789
console.log(book["title"]);
console.log(book.title);
console.log(book["category"]);
console.log(book.category);
//๊ฐ๋ณ ์ ๊ทผ
let book1 = "";
book1 = book.category[0];
document.getElementById("category").innerText=book1; //category ์์ด๋ ์ฐพ์์ ํด๋น ํ
์คํธ์ value ๊ฐ ์ง์ด๋ฃ๊ธฐ.
};
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๋๋ณด๊ธฐ
- <๊ฐ์ข> ๊ณต๊ณต๋ฐ์ดํฐ (์คํ ๋ฐ์ดํฐ) API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ Part.1
๊ณต๊ณต ๋ฐ์ดํฐ (์คํ ๋ฐ์ดํฐ) API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ Part.1 - ์ธํ๋ฐ | ๊ฐ์
๊ณต๊ณต ๋ฐ์ดํฐ ํฌํธ์์ ์ ๊ณตํ๋ ๋ค์ํ ์คํ ๋ฐ์ดํฐ๋ฅผ ์ฌ๋ฌ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ์ด๋ป๊ฒ ํธ์ถํ๊ณ , ํธ์ถ๋ ๊ฒฐ๊ณผ๋ก ์ ๊ณต๋ฐ๋ JSON ๋ฐ์ดํฐ๋ฅผ ์ด๋ป๊ฒ ์ฌ์ฉํ ์ ์๋์ง์ ๋ํด์ ๋ค์ํ ์ธ์ด๋ก ํ
www.inflearn.com
