-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
length error
22.06.09 14:02 작성 조회수 193
1
[그랩마켓]axios로 네트워크 통신하기 를 듣고 있는데 마지막에 이미지가 오류가 나는데 32번줄 length가 undefined라고 오류가 나오면서 이미지가 나오지 않습니다
답변을 작성해보세요.
1
1
1
0
mokwak
질문자2022.06.17
여기서 어디쪽의 문제인지 잘 모르겠습니다
<html>
<head>
<title>그랩마켓</title>
<link href="index.css" type="text/css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="header">
<div id="header-area">
<img src="images/icons/logo.png" />
</div>
</div>
<div id="body">
<div id="banner">
<img src="images/banners/banner1.png" />
</div>
<h1>판매되는 상품들</h1>
<div id="product-list"></div>
</div>
<div id="footer"></div>
</body>
<script>
axios
.get(
"https://f858de03-8615-4980-9d75-55e70df4ab1d.mock.pstmn.io/products"
)
.then(function (result) {
console.log("통신결과 : ", result);
const products = result.data.products;
let productsHtml = " ";
for (var i = 0; i < products.length; i++) {
let product = products[i];
productsHtml =
productsHtml +
'<div class="product-card">' +
"<div>" +
'<img class="product-img" src="' +
product.imageUrl +
'" />' +
"</div>" +
'<div class="product-contents">' +
'<span class="product-name">' +
product.name +
"</span>" +
'<span class="product-price">' +
product.price +
"</span>" +
'<div class="product-seller">' +
'<img class="product-avatar" src="images/icons/avatar.png" />' +
"<span>" +
product.seller +
" </span>" +
"</div>" +
"</div>" +
"</div>";
}
document.querySelector("#product-list").innerHTML = productsHtml;
})
.catch(function (error) {
console.log("error 발생 : ", error);
});
</script>
</html>
0
그랩
지식공유자2022.06.11
length가 undefined이면 보통 포스트맨 서버에서 제대로 데이터를 못불러왔을 확률이 높습니다.
웹에서 포스트맨 주소로 요청을 잘 했는지, 그리고 포스트맨 쪽에서 응답 설정을 잘 했는지 (json 문법 오타가 없는지) 확인해보시면 좋을 것 같아요 :)
답변 5