Vue
AJax로 json 자료 받아 출력하기. 다국어 프로그램. open api.
wintertreey
2024. 8. 7. 19:13
AJAX로 JSON 정보 출력하기
+ 다국어 프로그램
fetch 함수사용
10 더미파일
11 도서관 리스트
13 고정위치 날씨
axios 함수 사용
12 도서관리스트
AJAX로 JSON 정보를 읽어오는 방법(fetch 함수 사용할 경우)
- fetch 함수 사용:
- fetch는 JavaScript의 내장 함수로, HTTP 요청을 보내는 데 사용된다. 기본적으로 GET 요청을 보내며, URL을 매개변수로 받는다.
- 응답 처리:
- fetch는 프로미스를 반환하므로 .then 메서드를 사용하여 응답을 처리할 수 있다. 첫 번째 .then에서 응답 객체를 받고, 응답의 ok 속성을 확인하여 요청이 성공적으로 처리되었는지 확인한다.
- response.json() 메서드를 호출하여 응답 데이터를 JSON 형식으로 변환한다. 이 메서드 또한 프로미스를 반환하므로, 다음 .then에서 JSON 데이터를 사용할 수 있다.
- 데이터 사용:
- JSON 데이터가 변환된 후, 필요한 부분을 추출하여 Vue 인스턴스의 data 속성에 저장한다. 예를 들어, json.slice(0, 10)을 사용하여 데이터의 일부만 선택하여 저장할 수 있다.
- 에러 처리:
- .catch 메서드를 사용하여 네트워크 오류나 JSON 변환 오류 등을 처리한다. 에러 메시지를 콘솔에 출력하여 문제를 디버깅할 수 있다.
이러한 방식으로 비동기적으로 데이터를 요청하고 처리할 수 있으며, Vue.js와 같은 프레임워크와 결합하여 웹 애플리케이션을 동적으로 구성할 수 있다.
10 ajax로 json자료 받아 출력해보자. 더미데이터로 시도해본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<button @click="fetchData">Ajax로 json자료 읽기</button>
<button @click="clearData">json 자료 지우기</button>
<div v-for="(post, index) in posts" :key="index">
<h3>제목 : {{post.title}}</h3>
<br>아이디 : {{post.id}}</br>
<br>내용 : {{post.body}}</br>
<hr/>
</div>
</div>
<script>
const {createApp} = Vue;
createApp({
data(){
return{
posts:[] // 초기 상태는 빈 배열
}
},
methods: {
fetchData(){
// 'https://jsonplaceholder.typicode.com/posts' URL로 GET 요청을 보냄
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
// 응답의 상태를 확인. 상태가 OK가 아니면 에러 발생하는데, 이때 에러던지고 메세지뜨도록.
if(!response.ok){
throw new Error('ajax 에러');
}
return response.json(); // 응답을 JSON 형식으로 변환
})
.then(json => {
// JSON 데이터를 받아서 posts 배열의 앞 10개 항목만 저장
this.posts = json.slice(0, 10); //json의 데이터를 post배열에 담는다. 데이터의 일부만 받고자 slice
})
.catch(error => {
// 에러가 발생하면 콘솔에 에러 메시지를 출력
console.log('읽기 오류: ', error);
});
},
clearData(){ // posts 배열을 빈 배열로 초기화하여 데이터 화면에서 제거
this.posts = [];
}
},
}).mount('#app');
</script>
</body>
</html>
++ 추가
다국어 프로그램
<body>에 추가해준다
<div class="gtranslate_wrapper">
<script>window.gtranslateSettings = {"default_language":"ko","detect_browser_language":true,"languages":["es","de","th","mn","ar","ko","en","ja","zh-CN"],"wrapper_selector":".gtranslate_wrapper","flag_size":24,"horizontal_position":"right","vertical_position":"top"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/flags.js" defer></script>
</div>
11 도서관 정보 출력해보기
json 정보. url주소는 이미지 설명에 첨부해둠.
12 fetch대신 axios로 json 출력해보자_ 똑같이 도서관자료
axios cdn 갖고오기
https://cdnjs.com/libraries/axios
method 부분 조금 수정
response부분을 좀더 간략하게 만들어주었다.
전체소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.3/axios.min.js"></script>
</head>
<body>
<div class="gtranslate_wrapper">
<script>window.gtranslateSettings = {"default_language":"ko","detect_browser_language":true,"languages":["es","de","th","mn","ar","ko","en","ja","zh-CN"],"wrapper_selector":".gtranslate_wrapper","flag_size":24,"horizontal_position":"right","vertical_position":"top"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/flags.js" defer></script>
</div>
<div id="app">
<button @click="fetchData">도서관 자료 읽기</button>
<button @click="clearData">자료 지우기</button>
<div v-for="(lib, index) in libraries" :key="index">
<h3>{{lib.LBRRY_NAME}}</h3>
주소 : {{lib.ADRES}}<br>
전화 : {{lib.TEL_NO}}<br>
문닫는날 : {{lib.FDRM_CLOSE_DATE}}<br>
<hr/>
</div>
</div>
<script>
const {createApp} = Vue;
createApp({
data(){
return{
libraries:[]
}
},
methods: {
fetchData(){
axios.get('https://raw.githubusercontent.com/pykwon/python/master/seoullibtime5.json')
.then(response => {
this.libraries = response.data.SeoulLibraryTime.row;
})
.catch(error => {
console.log('읽기 오류: ', error);
});
},
clearData(){
this.libraries = [];
}
},
}).mount('#app');
</script>
</body>
</html>
13 고정된 위치의 날씨 정보 출력해보기 - ajax를 사용
api를 얻을 수 있는 다양한 곳이 있다. 그 중 하나가 openweathermap.
https://cafe.daum.net/flowlife/HrhB/59
https://cafe.daum.net/flowlife/HqLj/33
해당 카페의 추천 사이트들을 참고하자.
전국 시군구 위도경도
https://blog.naver.com/kiakass/222449339999
해당위치의 위도경도
이번에 정보를 얻을 url
위도경도를 찍어주면 날씨를 알려준다.
전체 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<button @click="fetchWeather">우리 교실 날씨정보</button>
<div v-if="weather">
<h2>현재 날씨 정보</h2>
<p>예보시간: {{weather.time}}</p>
<p>온도: {{weather.temperature}}°C</p>
<p>풍속: {{weather.windspeed}}km/h</p>
<p>풍향: {{weather.winddirection}}°</p>
</div>
</div>
<script>
const {createApp} = Vue;
createApp({
data(){
return{
weather:null
}
},
methods: {
fetchWeather(){
fetch('https://api.open-meteo.com/v1/forecast?latitude=37.4988&longitude=127.0317¤t_weather=true')
.then(
response => response.json()
)
.then(data => {
this.weather = data.current_weather;
})
.catch(error => {
console.log('날씨 자료 읽기 오류:', error)
})
}
},
}).mount('#app');
</script>
</body>
</html>
https://cafe.daum.net/flowlife/SBQ7/8
chapter 10 웹 문서 처리 : 실습 예제 url 주소 변경
실습 예제 중 일부의 url 주소를 변경합니다.서울시가 제공하던 '강남 소재 도서관 정보(5행 짜리)'가 폐쇄되어 부득이하게 주소를 변경합니다.326 페이지 : BeautifulSoup로 XML 문서
cafe.daum.net