자바스크립트 forEach()

문제점

자바스크립트 fetch 메소드 안에 있는 forEach() 메소드를 이해하고자 한다.

 

시도한 것

fetch 메소드는 url에서 데이터를 가져와 개발자가 사용할 수 있게 만들어 준다. 그렇게 '가공' 된 데이터에 forEach()  또한 적용할 수 있다. 

자바스크립트 forEach()  메소드는 배열의 각 요소들에 대해서 함수를 실행하고 그 값을 리턴한다.

예를 들면 아래와 같다. rows 에 들어있는 영화 데이터 하나하나(a)마다 아래 코드를 실행하므로 html에 영화데이터들이 순서대로 붙게 된다.

      fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {        
        let rows = data['movies']
        $('#cards').empty()

        rows.forEach((a) => {
          let title = a['title'];
          let desc = a['desc'];
          let comment = a['comment'];
          let star = a['star'];
          let image = a['image'];

          let star_image = '⭐'.repeat(star);

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