카드에 GET방식으로 불러오려하는데 안나와요

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

카드에 GET방식으로 불러오려하는데 안나와요

undefined주차

허*은

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

GET방식으로 URL에서 15개만 리스트 불러와서

카드에 나타내고 싶은데 이미지도, 와인, 와이너리 모두 나타지않고

위 사진처럼만 뜹니다 ㅠㅠ

어떻게 해야하나요?

작성한 코드 및 에러 메세지

<script>
    $(document).ready(function () {
         q1()
     })

     function q1() {
         $('#cards-box').empty

         $.ajax({
             type: "GET",
             url: "https://api.sampleapis.com/wines/reds/?_limit=12",
             data: {},
             success: function (response) {
                 let rows = response
                 for (let i = 0; i < rows.length; i++) {
                     let winery = rows[i]['winery']
                     let wine = rows[i]['wine']
                     let image = rows[i]['image']

                     let temp_html = `<div class="col">
                                             <div class="w-card">
                                                 <img src="${image}" class="card-img-top" alt="...">
                                                 <div class="card-body">
                                                     <h5 class="card-title">${wine}</h5>
                                                     <p class="card-text">${winery}</p>
                                                 </div>
                                             </div>
                                         </div>`

                     $('#cards-box').append(temp_html)

                 }

             }
         })

     }
</script>

<body>
<!--SEC1 카드만들기-->
<div class="cards-wrap">
<div class="cards">
<div class="card" style="width: 16rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<div class="cols">
<div class="w-card">
<img src="${image}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${wine}</h5>
<p class="card-text">${winery}</p>
</div>
</div>
</div>
</div>
</div>  
</div>  
</div>  


<div class="mycards"><div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box"></div>
</div>
</body>

app.py

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

댓글 알림