2022. 4. 4. 22:10ㆍ코딩/Java Script
안녕하세요. 코봉이입니다.
오늘은 JavaScript 를 이용하여 HTML에 JSON File을 삽입하는 방법을 알려드리겠습니다.
그 비결은 바로 Fetch API에 있습니다!
지금부터 예시를 들어 한 번 보여드리겠습니다.
// JSON 파일 생성 → /files/fileData.json
{"name":"Kobong", "age":20, "city":"Dague"}files라는 폴더를 만들어 주고, fileData.json 파일을 생성 후 저장해주세요.
index.html, script.js 파일 두 가지를 준비해 주셔야 하는데요.
우선 index.html 부터 아래와 같이 입력하세요!
<!DOCTYPE html>
<html>
<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>Document</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
위와 같이 index.html에 script.js 파일을 연결시켜 줍니다.
.js 파일에서 Fetch Web API를 이용하여 데이터를 불러오겠습니다.
fetch('files/fileData.json') // json 파일의 경로 입력
.then(res =>
res.json())
.then(data =>
console.log(data) // {name: 'Kobong', age: 20, city: 'Dague'} 출력
);
잘 불러오고 나면 아래와 같이 index.html 의 콘솔 창에서 json 파일의 출력값을 확인할 수 있습니다!
참 쉽죠~?!
불러온 json Data를 본격적으로 활용하려면 아래와 같이 변수를 설정하고 사용하시면 됩니다.
let myData;
fetch('files/fileData.json')
.then(res =>
res.json())
.then(data => {
myData = data
console.log(myData.name); // kobong 출력됨!!
});
결과를 한 번 볼까요~!?
Console 창에 kobong이의 이름이 딱~! 나왔습니다 ㅎㅎ
이상 Fetch API를 활용하여 json 파일을 javascript variable로 가져오는 방법을 알아봤습니다!
자세한 설명은 아래 링크를 참고 하시기 바랍니다.
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
Using Fetch - Web API | MDN
Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 fetch() (en-US) 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할
developer.mozilla.org
감사합니다.
'코딩 > Java Script' 카테고리의 다른 글
| Javascript Select 태그에 Option 추가 방법 (appendChild 이용) (0) | 2022.04.09 |
|---|---|
| JavaScript Array 배열 중복 제거 Set 구하는 방법 (0) | 2022.04.09 |
| SweetAlert2 이용하여 HTML alert 창 꾸미기 (0) | 2022.02.19 |
| bootstrap selectpicker dropdown below 처리 (0) | 2022.01.28 |
| jQuery id 표기방법 (0) | 2022.01.28 |