0

I'm making Shopping Cart, and I need to show all elements which were added to Shopping Cart, but elements which are the same should appear in the list only 1 time , but in this case i need to show quantity of these elements...

 {shoppingCart.map((book) => (
                    <div key={book.id} className="book-element">
                        <div className="col-1">
                            <img src={book.image}/>
                        </div>
                        <div className="col-4 shp-description">
                            <p>{book.title}</p>
                            <p>Cover: {book.hardCover === false ? 'Paperback' : 'Hardcover'}</p>
                        </div>
                        <div className="col-2">{}</div> // here i need to set quantity of the same elements
                        <div className="col-2">{book.price}$</div>
                        <div className="col-1">
                            <i className="fa fa-times" aria-hidden="true"></i>
                        </div>
                    </div>
                ))}
Dima
  • 27
  • 1
  • 6
  • 1
    sounds like you need to process the array to remove the dupes. https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates – epascarello Sep 03 '20 at 16:17
  • Or you use reduce to get the counts – epascarello Sep 03 '20 at 16:22
  • @epascarello ok, it's clear how to delete the same elements.. But how also i can show quantity of the same elements? – Dima Sep 03 '20 at 16:23
  • map's job is to transform data. the source observable pipes the data to the map where the lambda function transforms the data and emits the output. https://medium.com/angular-in-depth/reading-the-rxjs-6-sources-map-and-pipe-94d51fec71c2 – Golden Lion Sep 03 '20 at 16:32

2 Answers2

1

as @epascarello says, you need to process your list before mapping it to react components

processBookList(shoppingCart).map((book) => ...)

and then you have something like this

function processBookList(bookList) {
   // iterate over your list of books and build a new array
   // or maybe use array.reduce if it suits you
   return proccessedBookList;
}
TKoL
  • 13,158
  • 3
  • 39
  • 73
0

So process the books, basic task of combining records

getCartData() {
  // loop over the cart
  const combined = this.shoppingCart.reduce((obj, book) => {
    // reference the book we already have or create a new record
    obj[book.id] = obj[book.id] || {  ...book, qty: 0 };
    // increase the qty
    obj[book.id].qty++;
    return obj;
  });
  // return the array of books with qty
  return Object.values(combined);
}
epascarello
  • 204,599
  • 20
  • 195
  • 236
  • In this case I have object in object...also I don't understand why we use 'return Object.values(combined);' in this case.. it returns values of object and not array with object... – Dima Sep 03 '20 at 21:02
  • For example, I added 5 items (3 of them are the same, it meanse qty === 3), but when i use your example it shows that every item has qty 3/4/5/6 etc.. so.... – Dima Sep 03 '20 at 21:27