๐ JSON ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๊ธฐ ์ํ JS ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
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_01.js"></script>
</head>
<body>
</body>
</html>JavaScript ์ฝ๋
// [1] : ๋ฐ์ดํฐ
const person= [
{"name":"ํ๊ธธ๋","age":20,"nationality":"๋ํ๋ฏผ๊ตญ"},
{"name":"์ด์์ ","age":30,"nationality":"๋ฏธ๊ตญ"},
{"name":"๊ฐ๊ฐ์ฐฌ","age":40,"nationality":"์๊ตญ"},
{"name":"์์ง๋ฌธ๋","age":50,"nationality":"ํ๋์ค"}
];
console.log(typeof person); //object
console.log(typeof person[0]); //object
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๐ค typeof person[0] ์ String์ผ๋ก ๋์ค๊ฒ ํ๋ ค๋ฉด ์ด๋ป๊ฒ ํ ๊น?
// [1] : ๋ฐ์ดํฐ
const person= [
'{"name":"ํ๊ธธ๋","age":20,"nationality":"๋ํ๋ฏผ๊ตญ"}', //์์ ๋ฐ์ดํ๋ฅผ ๋ถ์ด๋ฉด String.
{"name":"์ด์์ ","age":30,"nationality":"๋ฏธ๊ตญ"},
{"name":"๊ฐ๊ฐ์ฐฌ","age":40,"nationality":"์๊ตญ"},
{"name":"์์ง๋ฌธ๋","age":50,"nationality":"ํ๋์ค"}
];
console.log(typeof person); //object
console.log(typeof person[0]); //String
console.log(typeof person[1]); //object
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๐ค person[0] ์ ๊ฐ๋ง ์ถ๋ ฅํ๊ธฐ
// [1] : ๋ฐ์ดํฐ
const person= [
{"name":"ํ๊ธธ๋","age":20,"nationality":"๋ํ๋ฏผ๊ตญ"}, //์์ ๋ฐ์ดํ๋ฅผ ๋ถ์ด๋ฉด String.
{"name":"์ด์์ ","age":30,"nationality":"๋ฏธ๊ตญ"},
{"name":"๊ฐ๊ฐ์ฐฌ","age":40,"nationality":"์๊ตญ"},
{"name":"์์ง๋ฌธ๋","age":50,"nationality":"ํ๋์ค"}
];
console.log(typeof person); //object
console.log(typeof person[1]); //object
// [2] : ์ถ๋ ฅ
console.log('-----------');
//๊ฐ๋ง ์ถ๋ ฅ๋๊ฒ๋.
console.log(person[0].name+""+person[0].age+""+person[0].nationality);
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๐ค ๋ฐฐ์ด์ ์์ ๋ฐ๋ณต ์ถ๋ ฅํ๊ธฐ
// [1] : ๋ฐ์ดํฐ
const person= [
{"name":"ํ๊ธธ๋","age":20,"nationality":"๋ํ๋ฏผ๊ตญ"}, //์์ ๋ฐ์ดํ๋ฅผ ๋ถ์ด๋ฉด String.
{"name":"์ด์์ ","age":30,"nationality":"๋ฏธ๊ตญ"},
{"name":"๊ฐ๊ฐ์ฐฌ","age":40,"nationality":"์๊ตญ"},
{"name":"์์ง๋ฌธ๋","age":50,"nationality":"ํ๋์ค"}
];
console.log(typeof person); //object
console.log(typeof person[1]); //object
// [2] : ์ถ๋ ฅ
console.log('-----------');
//๊ฐ๋ง ์ถ๋ ฅ๋๊ฒ๋.
console.log(person[0].name+""+person[0].age+""+person[0].nationality);
// [3] : ๋ฐ๋ณต
console.log('-----------');
console.log(...person); //์ ๊ฐ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ํด๋น ๋ฐฐ์ด์ ์์๋ฅผ ๋ฐ๋ณต ์ถ๋ ฅ.
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๐ค ๋ฐฐ์ด์ ํ๋กํ ํ์ ๋ณํํ๊ธฐ
// [3] : ๋ฐ๋ณต
console.log('-----------');
console.log(...person); //์ ๊ฐ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ํด๋น ๋ฐฐ์ด์ ์์๋ฅผ ๋ฐ๋ณต ์ถ๋ ฅ.
console.log([...person]); //Prototype --> Array
console.log({...person}); //Prototype --> Object
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๐ค ์ ์ฒด ๋ฐฐ์ด์์ ํน์ ์์ ์ถ์ถํ๊ธฐ
// [3] : ๋ฐ๋ณต
console.log([...person].length); //4
console.log({...person}[0].name); //ํ๊ธธ๋
console.log({...person}[0].age); //20
console.log({...person}[0].nationality); //๋ํ๋ฏผ๊ตญ
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๐ค ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด ํ์ฉํ๊ธฐ
// [4-1] : ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด --> for...of...(์ ๊ฐ์ฐ์ฐ์)
console.log('-----------');
for(let ele of person){ //์ฌ๊ธฐ์ person ์๋ฆฌ๋ ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๊ฐ ์ค๋ฉด ๋๋ค.
console.log(ele);
}
for(let ele of person[0]){ //person[0]์ ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๊ฐ ์๋๋ผ์ ์ค๋ฅ๊ฐ ๋๋ค.
console.log(ele);
}
// [4-2] : ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด --> for...in...(์ ๊ฐ์ฐ์ฐ์)
// ๋ฐฐ์ด์ธ ๊ฒฝ์ฐ์๋ ์ธ๋ฑ์ค๊ฐ ์ถ๋ ฅ.
for(let i in person){ //์ฌ๊ธฐ์ person ์๋ฆฌ๋ ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๊ฐ ์ค๋ฉด ๋๋ค.
console.log(i); //0,1,2,3 --> ๋ฐฐ์ด์ ์ธ๋ฑ์ค ๊ฐ ์ถ๋ ฅ.
}
// ๊ฐ์ฒด์ธ ๊ฒฝ์ฐ์๋ ํค๊ฐ ์ถ๋ ฅ.
for(let k in person[0]){ //์ฌ๊ธฐ์ person ์๋ฆฌ๋ ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๊ฐ ์ค๋ฉด ๋๋ค.
console.log(k); //name,age,nationality --> ๊ฐ์ฒด์ ํค ๊ฐ ์ถ๋ ฅ.
}
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๐ค ๊ฐ ์์ ํ๊ณ , ํ์ํ๊ธฐ
// [5] : ์์
console.log('-----------');
person[0].name="ํ๊ธธ์"; //๊ฐ ์์ .
person[0].age=15;
console.log(`ํ๊ธธ๋์ ์ด๋ฆ์ด ${person[0].name}๋ก ์์ , ๋์ด๋ ${person[0].age}๋ก ์์ `);
//์ฝ๋ ์ถ์ฒ
//์ธํ๋ฐ_๊ณต๊ณต ๋ฐ์ดํฐ API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ
๋๋ณด๊ธฐ
- <๊ฐ์ข> ๊ณต๊ณต๋ฐ์ดํฐ (์คํ ๋ฐ์ดํฐ) API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ Part.1
๊ณต๊ณต ๋ฐ์ดํฐ (์คํ ๋ฐ์ดํฐ) API ์ ๋๋ก ๋ฐฐ์ฐ๊ธฐ Part.1 - ์ธํ๋ฐ | ๊ฐ์
๊ณต๊ณต ๋ฐ์ดํฐ ํฌํธ์์ ์ ๊ณตํ๋ ๋ค์ํ ์คํ ๋ฐ์ดํฐ๋ฅผ ์ฌ๋ฌ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ์ด๋ป๊ฒ ํธ์ถํ๊ณ , ํธ์ถ๋ ๊ฒฐ๊ณผ๋ก ์ ๊ณต๋ฐ๋ JSON ๋ฐ์ดํฐ๋ฅผ ์ด๋ป๊ฒ ์ฌ์ฉํ ์ ์๋์ง์ ๋ํด์ ๋ค์ํ ์ธ์ด๋ก ํ
www.inflearn.com
