I'm stuck with an issue. Let me give you some details before I dive into it. I'm learning so this is not a real project. Second, the application is based on tutorial from acadmind video tutorials on youtube (https://www.youtube.com/watch?v=56TizEw2LgI&list=PL55RiY5tL51rajp7Xr_zk-fCFtzdlGKUp) and here is the github link (https://github.com/pin2plane/Academind-nodejs-shopping-cart) That tutorial is built using hbs templating framework. I'm trying to build the same project with PUG. I ran into an iteration issue:
We have the cart.add function:
module.exports = function Cart(oldCart) {
this.items = oldCart.items || {};
this.totalQty = oldCart.totalQty || 0;
this.totalPrice = oldCart.totalPrice || 0
this.add = function (item, id) {
//If the item exists in the stored item, go to increase the qty, price of that item line
//Also update the totalQty and totalPrice
var storedItem = this.items[id];
//if the item not there, then add the item to the empty items object
if (!storedItem) {
storedItem = this.items[id] = { item: item, qty: 0, price: 0 };
}
storedItem.qty++;
storedItem.price = storedItem.item.price * storedItem.qty;
this.totalQty++;
this.totalPrice += storedItem.item.price;
};
Focus on this line:
storedItem = this.items[id] = { item: item, qty: 0, price: 0 };
As you can see, the object properties consist of item[object, object], qty and price
The shopping-cart.hbs view is this:
{{# if products }}
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
<ul class="list-group">
{{# each products }}
<li class="list-group-item">
<span class="badge">{{ this.qty }}</span>
<strong>{{ this.item.title }}</strong>
<span class="label label-success">${{ this.price }}</span>
<div class="btn-group">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="https://stackoverflow.com/reduce/{{this.item._id}}">Reduce by 1</a></li>
<li><a href="https://stackoverflow.com/remove/{{this.item._id}}">Remove All</a></li>
</ul>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
My problem is with the dropdown button that display the reduce by 1 and remove all.
Here is my pug file (the products is passed to the view from the route handler)
div.row
div.col-lg-6.clearfix.offset-2.border
p.badge.badge-warning.float-right Quantity #{product.qty}
p Total price: #{product.price}  
each val in product
p #{val.title}
p DB Item ID : #{val._id}
.dropdown
button.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Action
ul.dropdown-menu
li
a.dropdown-item(href='#') Reduce By 1
li
a.dropdown-item(href='#') Remove All
The output is this:
As you can see the iteration goes over the {item :item, qty :, price: } But because I need access to the item._id (val._id), I can't move the buttons outside of this div, unless there is another way to get the item id so I can pass it to my route handler that handles the reduce by 1 and remove all functionality.
As I said in the beginning, the code works 100 % with hbs so it's not the route or express, it is pure pug issue, the iteration works fine because I'm able to access every product in the cart object and display title, id and everything
It's accessing the id and passing it to the button that I spent the last two days trying to figure out how to pass the id to the button with out iterating over the object but couldn't figure it out
If there is a pug ninja out there with experience in how to accomplish this, it would be so much appreciated to show me what I'm doing wrong or how to set this up correctly to match the same functionality the hbs file provides.
Cheers
