스틱코드라는 플러그인을 이용해 JSON데이터를 사용해봅시다
이번에 참고한 스틱코드입니다.
* 자바스크립트 JSON 파싱
stickode.com/detail.html?no=2142
스틱코드
stickode.com
============================================================================
JSON 이란??
JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute - value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.
'JSON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json이다.
- 위키백과
일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식. 클라이언트가 사용하는 언어에 관계 없이 통일된 데이터를 주고받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있게 된다.
과거 웹 초기 시절부터 사용되어 온 XML은 헤더와 태그 등의 여러 요소로 가독성이 떨어지고, 쓸데없이 용량을 잡아먹는다는 단점이 항상 지적되어 왔다. 이에 대응해 간결하고 통일된 양식으로 각광을 받고 있는 것이 JSON이다.
- 나무위키
JSON은 이렇게 생겼습니다!
{
"food": [
{
"name": "salad",
"재료": [
"lettuce",
"dressing"
"Nuts and Seeds"
]
},
{
"name": "toast",
"재로": [
"bread",
"egg"
"suger"
]
}
]
}============================================================================
이번 예제에서는 MDN 사이트 예제를 참고하되 서버로 부터 리소스를 가져올 때 fetch api를 사용할 껍니다.
Fetch api는 XMLHttpRequest와 비슷하지만 좀더 강력하고 유연한 조작이 가능합니다.
참고한 MDN 사이트 : developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
점/브라켓 표현법을 통해 객체 내 데이터에 접근할 수 있게 됩니다. 아래와 같이요:
superHeroes.homeTown
json을 사용하기
1 MDN에서 제공한 json데이터를 fetch api를 이용해서 가져온다.
fetch(
`https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json`
).then(function(response) {
return response.json();
}).then(function (json) {
console.log(JSON.stringify(json));
showHeroes(json);
}).catch(function(error) {
console.log(error);
});
2 가져온 JSON데이터를 출력한다.
아래와 같이 json과 추출한 데이터들이 잘 찍히는 것을 볼 수 있습니다.
3 가져온 JSON데이터를 HTML에 출력한다.
function showHeroes(jsonObj) {
var heroes = jsonObj['members'];
for (var i = 0; i < heroes.length; i++) {
var myArticle = document.createElement('article');
var myH2 = document.createElement('h2');
var myPara1 = document.createElement('p');
var myPara2 = document.createElement('p');
var myPara3 = document.createElement('p');
var myList = document.createElement('ul');
myH2.textContent = heroes[i].name;
myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
myPara2.textContent = 'Age: ' + heroes[i].age;
myPara3.textContent = 'Superpowers:';
var superPowers = heroes[i].powers;
for (var j = 0; j < superPowers.length; j++) {
var listItem = document.createElement('li');
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
<결과물>
전체코드입니다.
<html> 스틱코드 호출태그 : JSON예제(html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stickcode_JSON</title>
</head>
<body>
<section>
<!-- JSON 데이터 정렬 -->
</section>
</body>
<script src="main.js"></script>
</html><JavaScript> 스틱코드 호출태그 : JSON예제(JavaScript)
var section = document.querySelector('section');
// 1
fetch(
`https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json`
).then(function(response) {
return response.json();
}).then(function (json) {
// 2
console.log(JSON.stringify(json));
// 3
showHeroes(json);
}).catch(function(error) {
console.log(error);
});
// 3
function showHeroes(jsonObj) {
var heroes = jsonObj['members'];
for (var i = 0; i < heroes.length; i++) {
var myArticle = document.createElement('article');
var myH2 = document.createElement('h2');
var myPara1 = document.createElement('p');
var myPara2 = document.createElement('p');
var myPara3 = document.createElement('p');
var myList = document.createElement('ul');
myH2.textContent = heroes[i].name;
myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
myPara2.textContent = 'Age: ' + heroes[i].age;
myPara3.textContent = 'Superpowers:';
var superPowers = heroes[i].powers;
for (var j = 0; j < superPowers.length; j++) {
var listItem = document.createElement('li');
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
서버에서 JSON 데이터를 가져오게 되면 2번에서 로그를 찍었던것과 같이 보기 힘들게 출력됩니다.
이 때 데이터를 쉽게 보고 싶다면 json파서를 이용할 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 웹에서 음악 재생하기 (0) | 2021.06.12 |
|---|---|
| [JavaScript] 디지털 시계 만들기 (4) | 2021.06.02 |
| [JavaScript] 태그 추가 삭제 기능 빠르게 구현하기 (5) | 2021.05.28 |
| [JavaScript] 배경 색상 변경시키기 (0) | 2021.05.20 |
| [JavaScript] 애니메이션 구현하기 (anime.js 사용) (0) | 2021.05.19 |
