장바구니 기능과 localStorage 숙제_ 따옴표 처리 문제

[박보람]

상품 구매 누르면 상품 갯수가 올라가게?

[ {title : '상품명a', num : 2}, {title : '상품명b', num : 4}  ... ] 이렇게 저장해보려고 

아래 와 같이 코드 작성을 해보았습니다... 

 

그런데 JSON.pasrse로 array안  object 데이터에 "{}" 따옴표가 붙어서인지

num 조작이 되지 않는것 같습니다. 

stringifyrk 잘못되었나, 체크해보아도 해결이 되지 않아 문의드립니다!  

 

 

<script>

.. 중략 .. 

 

$('.buy').click(function(e){

var title = $(e.target).siblings("h5").text();
var num = 1;
var arr = `{제품 : ${title}, 합계 : ${num}}`;

if(localStorage.getItem('cart') != null){
// 로컬스토리지가 채워져 있을경우 
var 장바구니 = JSON.parse(localStorage.getItem('cart'));
=============================================

console.log(장바구니);

//콘솔 출력값 ["{제품 : Blossom Dress, 합계 : 1}", "{제품 : Springfield Shirt, 합계 : 1}", "{제품 : Black Monastery, 합계 : 1}"]

=============================================

 

if(장바구니.includes(arr)){
var 제품인덱스 = 장바구니.findIndex(data => data === arr);
var 장바구니2 = 장바구니.map(data =>
장바구니[제품인덱스].합계 = 장바구니[제품인덱스].합계 + 1
)
localStorage.setItem('cart', JSON.stringify(장바구니));
}
else {
장바구니.push(arr);
localStorage.setItem('cart', JSON.stringify(장바구니));
}
//});
}
else {
localStorage.setItem('cart', JSON.stringify([arr]));
// 로컬스토리지가 비어있을 경우
}
});

 

</script>

[codingapple]

var arr 만들 때 따옴표를 뺍시다 ${} 이것도 필요없을듯요 

[박보람]

감사합니다~! 합계 누적까지 잘 작동되었습니다~

 

[김선우]

안녕하세요,
제가 지금 이 숙제에 막혀서 고민하고 있는차에 이 코드를 봤습니다. 
혹시 이 부분 설명해주실 수 있으실까요?

var 장바구니2 = 장바구니.map(data =>
장바구니[제품인덱스].합계 = 장바구니[제품인덱스].합계 + 1
)
localStorage.setItem('cart', JSON.stringify(장바구니));
}

map은 for문처럼 돌아가는거같은데, 정확히 이해를 못 해서 사용을 못 하고 있습니다.  장바구니.map(data =>
장바구니[제품인덱스].합계 = 장바구니[제품인덱스].합계 + 1 이렇게 사용하면 배열 길이 만큼 더하는거 아닌가요,
그리고 장바구니2 map 돌린걸 넣으시고, localStorage.setItem('cart', JSON.stringify(장바구니)); 장바구니2가 아니라 장바구니에 넣으시는데, 혹시 이유가 있으실까요?
갑자기 질문드려 죄송하고, 시간이 괜찮으시면 답변 부탁드립니다. 
감사합니다.

[codingapple]

저 코드에서 map은 딱히 쓸모는 없어보입니다

[글쓴이]

글