API9 [Web] 복습 ( week - 3) API를 호출하고 데이터를 가공해 브라우저에 나타내본다. html은 저번에 만들었던 것을 사용한다. 사용할 API fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => { let rows = data['movies'] $('#cards').empty() rows.forEach((a) => { let comment = a['comment'] let desc = a['desc'] let image = a['image'] let star = a['star'] let title = a['title'] let temp_html = ` ${title} ${desc} ⭐⭐⭐ ${comment} ` $('#card.. 2023. 4. 19. [Web] 과제) 서울 날씨 API 적용시키기 - ( week 2 ) 이전에 만든 html을 베이스로 서울 날씨 API를 불러와서 데이터를 브라우저에 나타내본다. 서울 날씨 API 준비 API를 열어서 데이터를 살펴본다. 여기서 temp 데이터를 가져다 쓰면 될 것 같다. 날씨 정보 같은 경우 클릭 이벤트가 발생할 때 html이 생성되는 게 아니라 브라우저가 열릴 때 자동으로 실행되어야 한다. 이 기능을 해주는 함수가 있다. $(document).ready(function () { }) 간단하게 temp 값을 가져다가 해당 태그에 값을 넣어주면 된다. $(document).ready(function () { fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(d.. 2023. 4. 19. [Web] fetch 연습 - 따릉이API ( week 2 ) 따릉이 API 따릉이 API를 가공하면서 jquery를 연습해 본다. doctype html> Fetch 연습하고 가기! div.question-box { margin: 10px 0 20px 0; } table { border: 1px solid; border-collapse: collapse; } td, th { padding: 10px; border: 1px solid; } function q1() { // 여기에 코드를 입력하세요 } Fetch 연습하자! 2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기 모든 위치의 따릉이 현황을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 업데이트 거치대 위치 거치대 수 현재 거치된 따릉이 수 102. 망원역 1번출구 앞 22 0.. 2023. 4. 19. [Web] fetch 연습 - 미세먼지API ( week 2 ) 서울시 미세먼지 OpenAPI API를 통해서 가져온 데이터를 다루어 본다. JSON Data doctype html> 미세먼지 API로Fetch 연습하고 가기! div.question-box { margin: 10px 0 20px 0; } function q1() { fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => { //console.log(data) let row = data['RealtimeCityAir']['row'] row.forEach((a) => { console.log(a) }) }) } Fetch 연습하자! 1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기.. 2023. 4. 19. 이전 1 2 3 다음
