inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

자바스크립트 제대로 배워볼래?

Promise

Promis실습 도중의 에러메시지

450

elena

작성한 질문수 6

0

합계 데이터가 출력되지 않아 서버로부터 받아온 Data를 출력하면 어레이 형태의 객체인데, for 구문에서는 읽어온 data가 반영되지 않습니다.

코드와 오류는 아래와 같습니다.

    function getData(){
            return new Promise(function(resolve, reject){
                axios.get(url).then((response) => {
                console.log(response.data);
                resolve(response.data);
            }).catch((error)=>{
                console.log(error.message)
            })
        })
    }
    
    var total=0;
    getData().then(function(data){
        console.log(data)
        for (var items of data){
            total += item.price;
            }        
        console.log(total)
    })
    </script>
    
</body>
</html>

HTML/CSS es6 javascript

답변 3

1

elena

빠른 답변 감사합니다. 제가 여러번 테스트하면서 글을 올리다 보니 이전 글에 강사님이 답변주신 내용이 삭제되어, 다른분들께도 참조가 되실까 하여 올려봅니다. 저는 Postman Mockserver수업 앞부분만 먼저 듣고 JSON으로 만들어서 해당 내용을 API로 보내고, Promise부분 수업을 진행해서 실수가 있었네요 (Products하단에 Array배열). 강사님의 mockserver수업 뒷부분에 객체 구성으로 인한 오류수정이 있습니다. 초기의 오류는 아래와 같았습니다.

  1. resolve(response.data)로 자료를 받았을때 console의 오류입니다. products하단에 어레이가 배열됩니다. 콘솔을 보시면 확인됩니다.

  2. 강사님이 알려주신대로 resolve(response.data.products)로 하였습니다. axios에서 받아온 자료로 data를 출력하니 products하단에 자료형이 받아지고, 이후 resolve로 받아진 자료는 (합계를 내는 함수내에서는) 어레이로 받아진 것이 확인됩니다. console.log로 세부값을 확인하면서 진행하였습니다. ( 저는 Price를 대문자로 지정하여, item.Price로 해야 계산이 되었습니다.)

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        url ="https://3f5ea77d-8b64-48bb-ad04-fc87ad96cab4.mock.pstmn.io/productList"
        function getData(){
            return new Promise(function(resolve, reject){
                axios.get(url).then(function(response){
                console.log(response.data);
                resolve(response.data.products);
            });
        });
    }
    
    var total=0;
    getData().then(function(data){
        console.log(data)
        for (var item of data){
            console.log(item.Price)
            total += item.Price;
            }        
        console.log(total)
    })
    </script>
    
</body>
</html>
    
    
    </script>
</body>
</html>

0

elena

삭제된 글입니다

0

개발자의 품격

네 확인 되었습니다. return 받는 데이터를 보니 배열이 아니고 객체네요.

resolve(response.data.products)로 전달하시면 됩니다.

현재 products 키로 배열이 오고 있습니다.

0

개발자의 품격

일단 눈에 보이는 코드 중에서 오타가 있으시네요.

for(var items of data) 라고 여기서는 items인데

계산은 item으로 하고 있습니다.

이부분 부터 확인해보세요

외부 라이브러리 사용 질문

0

156

1

module 질문있습니다.

0

585

1

clearInterval, setInterval 질문

1

460

1

window 객체 질문 있습니다.

0

223

1

Date 함수 질문

0

290

1

Boolean 내장함수 강의 질문

0

322

1

4-04(마지막강의)에 있는 json으로 된 js파일은 어디에 있을까요?

0

412

1

Async Await 오류가 나서 문의드립니다.

0

565

2

선생님 안녕하세요. array내장함수 수업듣는중 이해가 안되는 부분이있어서 질문드립니다.

0

337

1

변수 관련 질문

0

287

1

moment.js cdn 외부 링크 오류

0

1468

1

64비트 부동소수점 내용 중

0

462

1

4-04 22분 15초에 나오는 61, 63 라인에 대해 질의드립니다.

0

253

1

64비트부동소수점 마지막부분 이해가 안가서요...

0

214

1

Chcekbox Element 값

0

228

1

parameter순서

0

468

1

parseInt parseFloat 질문

0

213

1

charAt 인덱스

0

219

0

STRING 결합

0

230

0

왜 오름차순으로 정렬되는지 궁금합니다.

0

243

1

HTML를 위한 자바스립트 4-01.HTML Element.html

0

347

1

함수 강의에서 8:47초 부분 질문 있습니다.

0

224

1

정규식 관련해서 질문이 있습니다.

1

305

2

module강의의 예제 코드를 사용하면 에러가 생겨서 질문드립니다.

0

372

1