[스파르타코딩클럽] 웹개발종합반 (국비) 2주차 기록(2) :: 패치 fetch

하루 최대로 들을 수 있는 강의가 16강의라서

최대한 빼본다.  오늘은 패치와 API 값을 빼보는 연습을 해본다.

원래 기본 개념은 알고 있었지만 퀴즈 풀면서 더 정확하게 가져오도록 훈련을 할 수 있었다.

실무에서 잘 할 수 있을 것 같아 기분이 좋다.

 

패치의 기본골격이다.

//기본골격 

 fetch('주소').then((res)=>res.json()).then((data)=>{
    console.log(data);
  })

//적용

 fetch('http://spartacodingclub.shop/sparta_api/seoulair') .then((res) => res.json())
 .then((data) => {
   let rows = data['RealtimeCityAir']['row'];
   rows.forEach((a) => {
   console.log(a['MSRSTE_NM'], a['IDEX_MVL']);
   });
 });

---

 

퀴즈를 통한 복습 내용이다.

 

퀴즈1 - 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기

 

<script>
  // API에서 원하는 값을 찾아 넣기
  function q1() {
    fetch('http://spartacodingclub.shop/sparta_api/seoulair').then((res) => res.json())
    .then((data) => {
       let rows = data['RealtimeCityAir']['row'];
       $('#names-q1').empty();
       rows.forEach((a) => {
       let location_data_ul = $('#names-q1');
       let gu_name = a['MSRSTE_NM'];
       let gu_mise = a['IDEX_MVL'];
       let temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
       $('#names-q1').append(temp_html);
       console.log(gu_name);
       console.log(gu_mise);
      });
  });
}
</script>

 

퀴즈2 - 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기

 

<script>
  function q1() {
    fetch('http://spartacodingclub.shop/sparta_api/seoulbike')
      .then((res) => res.json())
      .then((data) => {
        let dr_data = data['getStationList']['row'];
        $('#names-q1').empty();
        console.log(dr_data);
        dr_data.forEach((a) => {
          let temp_html = `<tr><td>${a['stationName']}</td><td>${a['rackTotCnt']}</td><td>${a['parkingBikeTotCnt']}</td></tr>`;
          $('#names-q1').append(temp_html);
        });
      });
  }
</script>

 

퀴즈3 - 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기 (거치수가 5이하이면 빨간색으로 표시하시오)

 

<script>
      function q1() {
        fetch('http://spartacodingclub.shop/sparta_api/seoulbike')
          .then((res) => res.json())
          .then((data) => {
            let dr_data = data['getStationList']['row'];
            $('#names-q1').empty();
            dr_data.forEach((a) => {
              let stationName = a['stationName'];
              let rackTotCnt = a['rackTotCnt'];
              let parkingBikeTotCnt = a['parkingBikeTotCnt'];

              let temp_html = '';
              //현재 따릉이 수가 5보다 작으면 빨간색으로 표시
              //조건문
              if (parkingBikeTotCnt < 5) {
                temp_html = `<tr class="red"><td>${stationName}</td><td>${rackTotCnt}</td><td>${parkingBikeTotCnt}</td></tr>`;
              } else {
                temp_html = `<tr><td>${stationName}</td><td>${rackTotCnt}</td><td>${parkingBikeTotCnt}</td></tr>`;
              }
              $('#names-q1').append(temp_html);
            });
          });
      }
    </script>

 

<새롭게 알게된 내용>

//별점 반복하는 법
let star = e['star'];
let starImg = '⭐'.repeat(star);

 

카드 반복문 + API 연결

$(document).ready(function () {
    //서울날씨 API
    let seoulWetherApi = 'http://spartacodingclub.shop/sparta_api/weather/seou';
    //스파르타 API
    let sprtApi = 'http://spartacodingclub.shop/web/api/movie';
    //날씨 넣기
    fetch(seoulWetherApi)
          .then((res) => res.json())
          .then((data) => {
            let temp_info = data['temp'];
            let temp_text = $('#temp');
            temp_text.text(temp_info);
          });
        //영화리스트 넣기
        let cardList = $('#cards-box');
        cardList.empty('');
        fetch(sprtApi)
          .then((res) => res.json())
          .then((data) => {
            let movies = data['movies'];
            movies.forEach((e) => {
              let comment = e['comment'];
              let desc = e['desc'];
              let image = e['image'];
              let star = e['star'];
              let starImg = '⭐'.repeat(star);
              let title = e['title'];

              let temp_html = `
              <div class="col">
                <div class="card h-100">
                  <img src="${image}" class="card-img-top" alt="${title}" />
                  <div class="card-body">
                    <h5 class="card-title">${title}</h5>
                    <p class="card-text">${desc}</p>
                    <p>${starImg}</p>
                    <p class="mycomment">${comment}</p>
                  </div>
                </div>
              </div>`;
              cardList.append(temp_html);
          });
     });
});