inflearn logo
강의

Course
Instructor

A real introductory all-in-one development boot camp for non-majors

[Grab Market] Network Communication with Axios

length error

372

mokwak

4 asked

1

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

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

Answer 5

1

mokwak

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

1

ajh43157404

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

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

정상적으로 작동합니다~

1

ajh43157404

저도 같은 문제인데요

axios로 데이터를 불러올때 

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

 

0

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>

0

grab

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

0

grab

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

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

 

[해결]그랩님 답변 주세요.

0

161

2

그랩님의 답변을 기다립니다/102강 전반적인 에러

0

141

2

[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.

0

123

2

[재질문][그랩님 답변 부탁드립니다]101강

0

140

2

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

0

97

2

Ngrok 설치 후 forwarding Url 에러

0

133

2

[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.

0

217

2

Ngrok 설치 후 forwarding Url로 연결 불가

0

135

1

그랩님,[꼭] 답변 부탁드립니다.

0

65

1

[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.

0

149

1

6강/7강 수업

0

50

1

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

0

98

2

그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.

0

134

2

[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

88

1

Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

127

2

일반적인 css 꾸미기에서 width와 height의 값?

0

90

2

Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법

0

193

1

그랩마켓 웹화면 구현하기 -2 질문입니다.

0

119

1

react에 반영이 되지 않습니다.

0

236

1

터미널 npm install -g create-react-app 작성 후 오류

0

419

1

create-react-app my app 실행 시 에러

0

354

2

포스트맨 질문

0

99

1

<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.

0

260

2

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

0

473

2