javascript - How do I calculate the Total Price of the Products in Shopping Cart using react.js - Stack Overflow

admin管理员组

文章数量:1318987

I am currently doing a project using react.js and Laravel. I need to get the total price of the products in shopping cart. I have already taken the output for subtotal(product price * quantity) for each products by adding this code "{item.aprice*item.quantity}". Now I need to get the total price of the subtotals.

This is the code for Cart.js

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import HeaderTop from './HeaderTop';

function Cart() {
let user = JSON.parse(localStorage.getItem('user-info'))

const [data, setData] = useState([])
useEffect(async () => {
    let result = await fetch("http://localhost:8000/api/getScartList/" + user.cust_id);
    result = await result.json();
    setData(result)

}, [])

async function deleteOperation(id) {
    let result = await fetch("http://localhost:8000/api/scartdelete/" + id, {
        method: 'DELETE'
    });
    result = await result.json();
    console.warn(result)
    getDataa();
}

async function getDataa() {
    let result = await fetch("http://localhost:8000/api/getScartList/" + user.cust_id);
    result = await result.json();
    setData(result)
}

useEffect(() => {
    getDataa();
}, [])


return (
    <div>
        <HeaderTop />
  <section class="cart-section section-b-space">
            <div class="container">
                            <div class="row">
                                <div class="col-sm-12 table-responsive-xs">
                                    <table class="table cart-table">
                                        <thead>
                                            <tr class="table-head">
                                                <th scope="col">image</th>
                                                <th scope="col">product name</th>
                                                <th scope="col">price</th>
                                                <th scope="col">quantity</th>
                                                <th scope="col">action</th>
                                                <th scope="col">total</th>
                                            </tr>
                                        </thead>
                                        {
                                            data.map((item) =>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <Link to={"diamondPot1/" + item.aproduct_id}><img src={"http://localhost:8000/" + item.file_path} /></Link>
                                                        </td>
                                                        <td>{item.name}</td>
                                                        <td>
                                                            <h2>Rs. {item.aprice}/=</h2>
                                                        </td>
                                                        <td>
                                                            <div class="qty-box">
                                                                <div class="input-group">
                                                                    {item.quantity}
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td><a href="#" class="icon"><span onClick={() => deleteOperation(item.aproduct_sc_id)} className="delete "><i class="ti-close"></i></span></a></td>
                                                        <td>
                                                            <h2 class="td-color">Sub total : RS. {item.aprice*item.quantity}/=</h2>                  
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            )}
                                    </table>
                                    <div class="table-responsive-md">
                                        <table class="table cart-table ">
                                            <tfoot>
                                                <tr>
                                                    <td>total price :</td>
                                                    <td>
                                                        <h2> </h2>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="row cart-buttons">
                                <div class="col-6"><Link to="/" class="btn btn-solid">continue shopping</Link></div>
                                <div class="col-6"><Link to="/checkOut" class="btn btn-solid">check out</Link></div>
                            </div>
            </div>
        </section>
        {/* section end */}

    </div>
  )
}
export default Cart

Thank you for your help!

I am currently doing a project using react.js and Laravel. I need to get the total price of the products in shopping cart. I have already taken the output for subtotal(product price * quantity) for each products by adding this code "{item.aprice*item.quantity}". Now I need to get the total price of the subtotals.

This is the code for Cart.js

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import HeaderTop from './HeaderTop';

function Cart() {
let user = JSON.parse(localStorage.getItem('user-info'))

const [data, setData] = useState([])
useEffect(async () => {
    let result = await fetch("http://localhost:8000/api/getScartList/" + user.cust_id);
    result = await result.json();
    setData(result)

}, [])

async function deleteOperation(id) {
    let result = await fetch("http://localhost:8000/api/scartdelete/" + id, {
        method: 'DELETE'
    });
    result = await result.json();
    console.warn(result)
    getDataa();
}

async function getDataa() {
    let result = await fetch("http://localhost:8000/api/getScartList/" + user.cust_id);
    result = await result.json();
    setData(result)
}

useEffect(() => {
    getDataa();
}, [])


return (
    <div>
        <HeaderTop />
  <section class="cart-section section-b-space">
            <div class="container">
                            <div class="row">
                                <div class="col-sm-12 table-responsive-xs">
                                    <table class="table cart-table">
                                        <thead>
                                            <tr class="table-head">
                                                <th scope="col">image</th>
                                                <th scope="col">product name</th>
                                                <th scope="col">price</th>
                                                <th scope="col">quantity</th>
                                                <th scope="col">action</th>
                                                <th scope="col">total</th>
                                            </tr>
                                        </thead>
                                        {
                                            data.map((item) =>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <Link to={"diamondPot1/" + item.aproduct_id}><img src={"http://localhost:8000/" + item.file_path} /></Link>
                                                        </td>
                                                        <td>{item.name}</td>
                                                        <td>
                                                            <h2>Rs. {item.aprice}/=</h2>
                                                        </td>
                                                        <td>
                                                            <div class="qty-box">
                                                                <div class="input-group">
                                                                    {item.quantity}
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td><a href="#" class="icon"><span onClick={() => deleteOperation(item.aproduct_sc_id)} className="delete "><i class="ti-close"></i></span></a></td>
                                                        <td>
                                                            <h2 class="td-color">Sub total : RS. {item.aprice*item.quantity}/=</h2>                  
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            )}
                                    </table>
                                    <div class="table-responsive-md">
                                        <table class="table cart-table ">
                                            <tfoot>
                                                <tr>
                                                    <td>total price :</td>
                                                    <td>
                                                        <h2> </h2>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="row cart-buttons">
                                <div class="col-6"><Link to="/" class="btn btn-solid">continue shopping</Link></div>
                                <div class="col-6"><Link to="/checkOut" class="btn btn-solid">check out</Link></div>
                            </div>
            </div>
        </section>
        {/* section end */}

    </div>
  )
}
export default Cart

Thank you for your help!

• javascript
• php
• reactjs
• laravel

Share Improve this question Follow asked Jun 23, 2021 at 13:58 SavindiSavindi 2111 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I agree the best way is by using the reduce method.

This works by applying a defined function on every element of your array and accumulating the results.

Assuming your data structure looks like this:

const data = [
  { 
    name: "item1",
    aprice: 10,
    quantity: 2
  },
  { 
    name: "item2",
    aprice: 10,
    quantity: 2
  },
  { 
    name: "item3",
    aprice: 10,
    quantity: 2
  },
  { 
    name: "item1",
    aprice: 10,
    quantity: 4
  },
]

You can use the reducer like below:

const initialValue = 0;
const total = data.reduce((accumulator,current) => accumulator + current.aprice * current.quantity, initialValue)

Just use the array.reduce function:

<td>total price :{data.reduce((total, item)=>total+(item.aprice*item.quantity),0)}</td>

本文标签： javascriptHow do I calculate the Total Price of the Products in Shopping Cart using reactjsStack Overflow