Adding up a value from a nested object

Question

I am working on a project to get orders from an API and display them in a dashboard with some basic information (my first project). Currently what i am displaying looks like this:

Fields from left to right: Date, Amount of products in order, price

I'm currently looping through all products in an order and display the amount, therefore it displays "1 15", the same goes for price. I want to add them up instead and just display "16".

I'm trying to create a method to do so but i cant seem to get it working. This is my current code.

HTML

<tr v-for="(order, index) in orders"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ order.id }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ order.deliveryName }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ order.createdAt }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span v-for="(product) in order.products">
                                    {{ product.amount }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span v-for="(product) in order.products">
                                    {{ product.amount * product.price }}<br>
                                </span>
                            </td>

i tried removing the order.products loop and instead do so in a method but i couldn't get it working. For example (i tried tweaking the method around a bit to no avail)

In HTML: {{ getOrderAmount(order)}}

In SCRIPT:

getOrderAmount: function (order) {
        let amount = 0;
        order.forEach(product) in order.products
        {
            amount += product.amount
        }
        return amount;
    },

How can i go about this. Help is much appreciated!

Boussadjra Brahim · Accepted Answer · 2021-01-26 13:05:45Z

You could map your orders by summing the product amount/prive using a computed property then use that property inside the template :

computed(){
  mappedOrders(){
        this.order.map((order)=>{
                 order.productsAmount=order.products.reduce((acc,curr)=>{
                     return acc+=curr.amount;
                },0)
        
     order.sumPrices=order.products.reduce((acc,curr)=>{
                     return acc+=curr.amount * curr.price ;
                },0)

        return order;
      })

   }
}

in template :

<tr v-for="(order, index) in mappedOrders" ..>
     ...
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span >
                                    {{ order.productsAmount}}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span >
                                    {{ order.sumPrices}}<br>
                                </span>
                            </td>
</tr>

Collectives™ on Stack Overflow

Adding up a value from a nested object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related