728x90
반응형
✔ JSON
JSON(JavaScript Object Notation)
- 데이터를 저장하거나 전송할 때 사용되는 경량의 DATA 교환 형식
- 사람과 기계 모두 이해하기 쉬우며 용량이 작아서 XML을 대체하여 데이터 전송등에 많이 사용
- 데이터 포멧일 뿐, 통신 방법도 프로그래밍 문법도 아님✔ JSON 특징 1
JSON의 특징
- 서버와 클라이언트간의 교류에서 일반적으로 많이 사용
- 자바스크립트를 이용하여 JSON 형식의 문서를 자바스크립트 객체로 변환하기 쉬움
- 자바스크립트 문법과 굉장히 유사하지만 텍스트 형식일 뿐임
- 특정 언어에 종속되지 않으며 대부분 프로그래밍 언어에서 JSON 포멧의 데이터를 핸들링 할 수 있는 라이브러리를 제공
{
"name":"루시",
"age" : 13,
"family":"포메",
"weight":3.5
}
✔ JSON 특징 2
✔ JSON은 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합, 자바스크립트 객체와 다른점은 메소드 프로퍼티가 없음
JSON의 구조
- 이름과 값의 쌍으로 이루어짐
- 데이터는 쉼표로 구분하여 나열
- {}중괄호로 둘러싸여 표현
- 배열은 []대괄호로 둘러싸여 표현
JSON의 타입
- 숫자(number)
- 문자열(String)
- 불리언(boolean)
- 객체(object)
- 배열(array)
- null
JSON 배열 표현 예제
{
"dog" :[
{"name":"루시","age" : 13,"family":"포메","weight":3.5},
{"name":"뽀시","age" : 12,"family":"폼피츠","weight":5.5},
{"name":"루뽀","age" : 15,"family":"허스키","weight":1.5}
]
}
https://jsonlint.com/ - json이 문법적으로 확인하는 사이트
JSON 함수
stringify(object) : JSON
객체를 문자열로 변환(직렬화, Serializing)
parse(JSON) : object
문자열 데이터를 자바스크립트 객체로 변환(역직렬화, Deserializing)
✔ JSON 예제
const dog = {
name : 'Lucy',
age : 13,
eat :()=>{
console.log('먹고있음!')
}
};
const json = JSON.stringify(dog);
console.log(json)
// 결과 -> {"name":"Lucy","age":13}
// 문자열로 변환하여 메소드는 출력X
console.log(dog)
const obj = JSON.parse(json);
console.log(obj)
// 결과 -> { name: 'Lucy', age: 13 }✔ JSON 과제
과제
인터넷에서 JSON API를 자유롭게 검색하고 해당 API를 호출하여 페이지에 출력하는 예제를 만들어보자.
- get 방식
- post 방식
data.go.kr 공공데이터포탈 - 공공데이터 확인✔ JSON 과제 코드
fetch 내 주소는 공공데이터 포털을 이용 -> 활용신청 -> 참고자료 문서 내 인증키 확인 -> 인증키 복사 활용
<!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>json</title>
<script>
function fetchAPI(){ //비동기로 데이터를
return fetch('https://www.7timer.info/bin/astro.php?lon=113.2&lat=23.1&ac=0&unit=metric&output=json&tzshift=0')
.then((response)=> response.json())
.then((data)=> data);
}
fetchAPI().then((datas) => {
console.log(datas.dataseries);
showDatas(datas.dataseries)
})
function showDatas(datas){
const ulElement = document.querySelector('#dataseries')
ulElement.innerHTML = datas.map((data) => setLiElement(data) ).join('')
}
function setLiElement(data){
return `<li>cloudcover:${data.cloudcover} lifted_index :${data.lifted_index}prec_type :${data.prec_type}rh2m:${data.rh2m} seeing:${data.seeing} temp2m :${data.temp2m}timepoint :${data.timepoint}transparency:${data.transparency}</li>`;
}
</script>
</head>
<body>
<h2>json</h2>
<ul id="dataseries">
</ul>
</body>
</html>✔ JSON API 결과
반응형
'JavaScript' 카테고리의 다른 글
| 자바스크립트 파일 용량 제한과 여부 (0) | 2023.08.24 |
|---|---|
| JavaScript 회원가입(정규식, 서명, 별명, CKEditor5(자기소개)) (0) | 2022.11.28 |
| JavaSript Promise Object (0) | 2022.11.15 |
| JavaScript(주석, 예외처리, 모듈, 가위바위보/ 퀴즈 문제) (0) | 2022.11.14 |
| JavaScript(set, map, operator) (0) | 2022.11.10 |