length error

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

[그랩마켓] axios로 네트워크 통신하기

작성

257

[그랩마켓]axios로 네트워크 통신하기 를 듣고 있는데 마지막에 이미지가 오류가 나는데 32번줄 length가 undefined라고 오류가 나오면서 이미지가 나오지 않습니다

머신러닝 배워볼래요? nodejs javascript HTML/CSS react-native tensorflow express react

답변 5

mokwak

질문자

해결했습니ㄷ. 감사합니다

안재현

다시 확인해보니 포스트맨에서 디폴트 작성할때

각 배열마다 imageUrl ~ 줄의 마지막 ,(콤마)를 없애주었더니

정상적으로 작동합니다~

안재현

저도 같은 문제인데요

axios로 데이터를 불러올때

저는 데이터가 배열로 안불러와지는것 같았어요

mokwak

질문자

여기서 어디쪽의 문제인지 잘 모르겠습니다
 
 
<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>

그랩

지식공유자

아래 재현님이 적어주신 것과 동일하게, 포스트맨 response에서 마지막 imageUrl에 ,를 빼주셔야 할 것 같습니다!

그랩

지식공유자

length가 undefined이면 보통 포스트맨 서버에서 제대로 데이터를 못불러왔을 확률이 높습니다.

웹에서 포스트맨 주소로 요청을 잘 했는지, 그리고 포스트맨 쪽에서 응답 설정을 잘 했는지 (json 문법 오타가 없는지) 확인해보시면 좋을 것 같아요 :)

인프런 커뮤니티 질문&답변

length error