CODEWITHSUNDEEP
node.jsvue.js
user8705895
user8705895

Reputation:

Cannot read property 'price' of undefined in VueJs Application

I am creating shopping cart system by using vueJs. I want to display the list of item that user want to by but when I run the application and try to add product in checkout list ,I am getting following errors in google chrome console windows when I want to add the item into list.

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

(found in <Root>)
warn @ vue.js:634
vue.js:1897 TypeError: Cannot read property 'name' of undefined
    at eval (eval at createFunction (vue.js:11628), <anonymous>:3:265)
    at Proxy.renderList (vue.js:2658)
    at Proxy.eval (eval at createFunction (vue.js:11628), <anonymous>:3:183)
    at Vue._render (vue.js:3545)
    at Vue.updateComponent (vue.js:4061)
    at Watcher.get (vue.js:4472)
    at Watcher.run (vue.js:4547)
    at flushSchedulerQueue (vue.js:4305)
    at Array.<anonymous> (vue.js:1989)
    at flushCallbacks (vue.js:1915)
logError @ vue.js:1897
cart.html:91 Uncaught (in promise) TypeError: Cannot read property 'price' of undefined
    at cart.html:91

Here is my cart.html code .

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstap.css">
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>-->
    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js">

    </script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="index.html">Shop</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="index.html">Show All Products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/AddProducts.html">Add Product</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="cart.html"> cart</a>
            </li>
        </ul>
    </nav>
    <br />
    <div class="container" id="app">
        <h2>Your cart</h2>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>quantity</th>
                    <th>Rate</th>
                    <th>vendor</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="cartItem in cartItems">
                    <td>{{cartItem.product.name}}</td>
                    <td>
                        <button type="button" class="btn btn-primary" v-on:click="changequantity(cartItem.productId,-1)">-</button>
                        {{cartItem.quantity}}
                        <button type="button" class="btn btn-primary" v-on:click="changequantity(cartItem.productId,+1)">+</button>
                    </td>
                    <td>{{cartItem.product.price}}</td>
                    <td>{{cartItem.product.vendor.name}}</td>
                    <td>{{cartItem.quantity*cartItem.product.price}}</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><b>Total</b></td>
                    <td>{{this.totalPrice}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>let app = new Vue({
        el: "#app",
    data: {

        totalPrice: 0,
        price: 0,
            cartItems:[]
        },
        methods:{
            fetAllcartItems(){
                new Promise((resolve)=>{
                    axios.get('/api/cart').then(function (response) {
                    resolve(response.data)
                })
                }).then((data)=>{
                        console.log(data)

                            this.cartItems=data
                            // console.log(data)
                            for(d in data){

                                this.totalPrice = this.totalPrice+ (d.quantity )* (d.product.price);
                            }
                    // console.log(this.products)
                })
            },
            changequantity(id,quantity){
                var obj = {id : id , quantity: quantity}

                // let iddd = parseInt(id)
                console.log(this.cartItems)
                let index =this.cartItems.findIndex(item => item.productId == id)

                this.totalPrice = this.totalPrice + this.cartItems[index].product.price * quantity
                if(this.cartItems[index].quantity ===1 && quantity===-1){
                    this.cartItems.splice(index ,1);
                }
                new Promise((resolve)=>{
                    axios.post('/api/cart/add',obj).then(function (response) {
                    resolve(response.data)
                })
                }).then((data)=>{
                    console.log(data)

                    if(data.quantity>0)
                    this.cartItems[index].quantity = data.quantity
                    /*for(d of data){

                        this.totalPrice = this.totalPrice+ (d.quantity )* (d.product.price);
                    }*/
                })
                // location.reload();
            }
        }
    })
    app.fetAllcartItems();</script>
    </body>
</html>

Here is the screen shot when I clicked the buy button.

enter image description here

Here is the screen shot when I run the applications.. click

Upvotes: 0

Views: 1275

Answers (2)

Zubaer Haque
Zubaer Haque

Reputation: 172

To see why name is showing you need to check which data you are getting, check it on VueDevtool or else make put console.log(this.cartItems) on a proper place and see how its related , make sure that in this object cartItems is an array of object where poduct is also object and name has value/null.

Also for(d in data) , replace with for(let d in data)

Upvotes: 0

skirtle
skirtle

Reputation: 29102

for(d in data){ seems almost certainly wrong. Perhaps you meant for(const d of data) {? In its original form d is a string key, not the item in the array. That's plausibly the cause of the second error, the one about price.

For the error about name I would guess it's this:

<td>{{cartItem.product.vendor.name}}</td>

It looks like cartItem.product.vendor is undefined in some cases.

I strongly suggest you start using a linter. Your code is full of other small defects that I would expect a linter to pick up for you.

For starters, you shouldn't be creating all those new promises.

Upvotes: 0

Related Questions