커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
ㅡㅜ 맥 ios 입니다 http://spartacodingclub.shop/web/api/movie 속 데이터를 불러오지 못해요
undefined주차
북마크
정*원
댓글
24
・
추천
0
・
조회수
30
조회수
30
답변 완료

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

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



3주차 3-2 강의 마지막 부분

$('#cards').empty()

후에 불러오지 못해요 ㅠ 다음과 같은 메세지가 뜹니다.


보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게

스파르타 즉문즉답

상황을 이해할 수 있어요.




<!doctype html>

<html lang="en">


<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">

</script>


<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');


* {

font-family: 'Gowun Dodum', sans-serif;

}


.mytitle {

background-color: hotpink;

color: pink;


height: 250px;


display: flex;

flex-direction: column;

align-items: center;

justify-content: center;


background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);

background-position: center;

background-size: cover;

}


.mytitle>button {

width: 250px;

height: 50px;


background-color: transparent;


border: 1px solid pink;

color: pink;


border-radius: 50px;


margin-top: 20px;

}


.mytitle>button:hover {

border: 2px;

}


.mycomment {

color: #ff69b4;

}


.mycards {

width: 1200px;

margin: 20px auto 20px auto;

}


.mypost {

width: 500px;

margin: 20px auto 20px auto;

padding: 20px 20px 20px 20px;


box-shadow: 0px 0px 3px 0px gray;

}


.mybtn {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;


margin-top: 20px;

}


.mybtn>button {

margin-right: 10px;

}

</style>

<script>

$(document).ready(function () {

fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {

let number = data['temp']


$('#temp').text(number)

})

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 class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

</div>`

$('cards').append(temp_html)

});

})

})

</script>

</head>


<body>

<div class="mytitle">

<h1>내 생애 최고의 영화들</h1>

<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>


<button onclick="hey()">영화 기록하기</button>

</div>

<div class="mypost">

<div class="form-floating mb-3">

<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">

<label for="floatingInput">영화 URL</label>

</div>

<div class="input-group mb-3">

<label class="input-group-text" for="inputGroupSelect01">Options</label>

<select class="form-select" id="inputGroupSelect01">

<option selected>Choose...</option>

<option value="1">⭐</option>

<option value="2">⭐⭐</option>

<option value="3">⭐⭐⭐</option>

</select>

</div>

<div class="form-floating">

<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"

style="height: 100px"></textarea>

<label for="floatingTextarea">코멘트</label>

</div>

<div class="mybtn">

<button type="button" class="btn btn-dark">기록하기</button>

<button type="button" class="btn btn-outline-dark">닫기</button>

</div>

</div>

<div class="mycards">

<div id="cards" class="row row-cols-1 row-cols-md-4 g-4">

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 코멘트가 들어갑니다</p>

<p>⭐⭐⭐</p>

<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>

</div>


<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 코멘트가 들어갑니다</p>

<p>⭐⭐⭐</p>

<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>

</div>


<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 코멘트가 들어갑니다</p>

<p>⭐⭐⭐</p>

<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>

</div>


<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 코멘트가 들어갑니다</p>

<p>⭐⭐⭐</p>

<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>

</div>


<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 코멘트가 들어갑니다</p>

<p>⭐⭐⭐</p>

<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>

</div>


<div class="card-footer">

<small class="text-muted">Last updated 3 mins ago</small>

</div>

</div>

</div>

</div>

</div>

</body>


</html>



취소
 공유
취소
댓글 0
댓글 알림
나의얼굴