프로미스 객체 템플릿 리터럴 안에서 쓰는법..ㅠ

Question

async function showDetail(idx) {const orderList = await getOrderInfo();const orderObj = orderList[idx];let products = "";orderObj.orderArray.forEach(e => {products += `${e.productName} / ${e.quantity}개 - ${(e.price)*(e.quantity)}`extendedPrice += (e.price)*(e.quantity);})let output = `

주문번호 : ${orderObj.orderNo}주문 물품 : ${products}총 결제 금액 : ${extendedPrice}수령인 : ${orderObj.recipientName}주소 : ${orderObj.address} ${orderObj.detailAddress}배송메시지 : ${orderObj.deliveryMessage}

`extendedPrice = 0;return output;}이렇게 해서 output이라는 문자열을 반환하는 showDetail 함수를async function drawTable() {const orderList = await getOrderInfo();const tBody = document.querySelector(".order-table > tbody");let output = "";orderList.forEach(async (e, idx) => {let numStr = "";if (e.orderArray.length-1 > 0) numStr = 외 ${e.orderArray.length-1}개;let div = await showDetail(idx); /////////////////////////////////////////////////////////output += `${e.createAt}

${e.orderArray[0].productName}${numStr}

${div} //////////////////////////////////////////////////////////////////////////${e.status}`;})tBody.innerHTML = output;}이렇게 drawTable 이라는 함수 내에서 ////// 표시 해둔 부분과 같이 쓰고싶은데 저러면 table 내용이 아예 안나오더라구요..첫번째 /// 표시부분(let div = await showDetail(idx)) 밑에서 div를 콘솔로 찍어보면 showDetail 함수가 반환한 output 문자열이 잘 나오고 타입을 찍어봐도 String이라고 나오는거보니 showDetail 함수값 잘 가져온건 분명한데..div 값을 아래의 템플릿 리터럴 안에서 ${div}로 사용하기만 하면 에러가 납니다. 분명 값 가져왔고 json객체거나 한것도 아닌 그냥 문자열을 담은 변수인데 사용이 안돼요 ㅠㅠㅠ 뭐가 문제일까요..ㅠㅜㅠㅜㅠlet div = await showDetail(idx) 를 안하고 템플릿 리터럴에서 바로 ${showDetail(idx)} 로 쓰면 표는 잘 나오는데 [object Promise] 라고 나옵니다. 아니면 여기서 [object Promise]의 내용을 화면에 출력할 방법이 있을까요?

yeori · Answer

문제가 뭔지는 대강 알겠는데 코드 포매팅이 안돼서 더 보기는 힘드네요.

프로미스 객체 템플릿 리터럴 안에서 쓰는법..ㅠ

1개의 답변

Q&A 목록