Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Issue while Making shopping cart

Image from server Image from debuggerSo I was programing shopping cart project and I have a issue.

I wanted to display the details of the data stored in local storage in cart.html. When running the code the program cannot find .name or anything in data.js and returns with undefined or async image rather than actual image or name

Without the search function, in console I can see the things that are in the cart with all its details example: id, name, desc, so on…

I wanted the program to function in such a way that ‘if’ the cart has data display the contents ‘else’ say cart is empty and button which says return to home.

The if and else function are both functioning fine the only issue is with displaying the contents

Would really appreciate if you can provide the correction and proper guidance, thanks in advance!

part of cart.html

<div id="label" class="text-center"></div>


      <div id="shopping-cart" class="shopping-cart"></div>


    </body>
    <script src="src/data.js"></script>
    <script src="src/cart.js"></script>
</html>

cart.js

let label = document.getElementById('label');
let shoppingCart = document.getElementById('shopping-cart');


let basket = JSON.parse(localStorage.getItem("data")) || [];


let calculation = () => {
    let cartIcon = document.getElementById("cartAmount");
    cartIcon.innerHTML = basket.map((x) => x.item).reduce((x, y) => x + y, 0);
};

calculation();


let generateCartItems = () => {

    if (basket.length !== 0) {
        return (shoppingCart.innerHTML = basket
            .map((x) => {
                console.log(x);
                let {
                    id,
                    item
                } = x;
                let search = shopItemsData.find((y) => y.id === id) || [];
                return `
            <div class="cart-item">
                <h2>${search.name} has been added</h2>
            </div>
            `;
            })
            .join(''));
    } else {
        shoppingCart.innerHTML = ;
        label.innerHTML = `
        <h2>Cart is EMPTY!</h2><br>
        <a href="index.html">
        <button type="button" class="btn btn-danger">Back to Home!</button>
        </a>
        `;
    }
};

generateCartItems();

data.js

let shopItemsData = [
    {
        id: "1",
        name: "Silver Wash",
        price: 499,
        desc: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
        img: "images/silver.jpg"
    },
    {
        id: "2",
        name: "Gold Wash",
        price: 999,
        desc: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
        img: "images/gold1.jpg"
    }];

Now in the index.html I have programed the cards with the value in index.html itself and made separate data.js for .js files to be used in other .js files example of index.html shown below:

<div class="shop" id="shop">

        <div id=product-id-1 class="card mb-3">
          <div class="row g-0">
            <div class="col-md-4">
              <img src="images/silver.jpg" class="img-fluid rounded-start" alt="...">
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">Silver Wash</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.
                  This content is a little bit longer.
                </p>
                <br>
                <button type="button" onclick="add(1)" class="btn btn-primary">@499 | Add to cart</button>
              </div>
            </div>
          </div>
        </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The issue was in the cart.js file. It was a data type mismatch, such as comparing a string id to a numeric id, or vice versa. To address this issue, let's ensure that we're comparing the same data types.

    let generateCartItems = () => {

if (basket.length !== 0) {
    return (shoppingCart.innerHTML = basket
        .map((x) => {
            console.log("ID:", x.id); // Log the id
            console.log("shopItemsData:", shopItemsData); // Log the shopItemsData array
            console.log(x);
            let {id} = x;
            let search = shopItemsData.find((y) => y.id === id.toString()); //Here y.id === id.toString not just id
            console.log("Search result:", search); // Log the search result
            return `
        <div class="cart-item">
            <h2>${search ? search.name : "Unknown item"} has been added</h2>
        </div>
        `;
        })
        .join(''));
}else{};

  2. 0

    If you don’t use any libraries, this part

                    return 
            <div class="cart-item">
                <h2>${itemName} has been added</h2>
            </div>
            ;

    must throw an error Uncaught SyntaxError: Unexpected token '<', since JavaScript doesn’t know how to interpret it. So, elements must be strings.
    You should wrap it in backtick like so

    return `<div class="cart-item">
<h2>${itemName} has been added</h2>
</div>`
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search