Calculate total from array in localStorage-CodePudding

I have am using react and globalContext to add items to a cart page and this adds the product to an array stored in the localStorage and looks like this.

basket,…]
0: {id: "9", title: "Apple Watch SE 40mm (GPS) - Space Grey Aluminium Case with Midnight Sport Band",…}
id: "9"
price: 249.99
quantity: 1
src: "/static/media/se.0ca02982636517aed223.png"
title: "Apple Watch SE 40mm (GPS) - Space Grey Aluminium Case with Midnight Sport Band"

The key is basket and i am able to map the data in the basket page but how would i calculate the total of the items with in that array?

import { GlobalContext } from '../context/GlobalState'

export const Basket = () => {

  const {basket} = useContext(GlobalContext)

 

  return (
    <div className="h-screen bg-zinc-100 p-4">
      
      <div className="py-5">
        <div className="max-w-md mx-auto bg-white shadow-lg rounded-lg md:max-w-7xl">
          <div className="md:flex">
            <div className="w-full p-4">
              <div className="md:grid md:grid-cols-3 gap-2 ">                          
                <div className="col-span-2 p2 md:p-5">
                  <h1 className="text-xl font-bold ">Shopping Basket</h1>
                  <div className="flex justify-between flex-col items-center mt-6 pt-6 gap-12">
                    {basket.length > 0 ? (
                      <>
                      {basket.map(item => (
                        <>
                          <div className='flex flex-col w-full justify-between md:gap-44 items-start'>
                            <div className="flex items-center">
                              <img src={item.src} className="rounded w-20 " />
                              <div className="flex flex-col ml-3 gap-1 ">
                                <span className="md:text-lg text-sm font-bold w-full md:t-width ">{item.title}</span>
                                <span className="text-xl font-bold">£ {item.price}</span>
                              </div>
                            </div>
                          </div>
                          
                        </>
                      ))}
                      </>
                    ) : (
                      <div>No Items</div>
                    )}
                    
                  </div>
    
                  <div className="flex justify-between items-center mt-6 pt-6 border-t">
                    <div className="flex items-center"> <i className="fa fa-arrow-left text-sm pr-2">
                      </i> <span className="text-md font-medium text-amz hover:text-orange-500 cursor-pointer "> <FontAwesomeIcon icon={ faChevronLeft }></FontAwesomeIcon> Continue Shopping</span> 
                    </div>
                    <div className="flex justify-center items-end"> 
                      <span className="text-sm font-medium text-gray-400 mr-1">Total:</span> 
                      <span className="text-lg font-bold text-gray-800 ">Total}</span> 
                    </div>
                  </div>
                </div>

CodePudding user response：

You'd simply loop over the array from the localstorage and calculate the total.

let cartArray = localStorage.getItem("basket");
/* since cartArray returns a stringified array you need to parse it */

cartArray = JSON.parse(cartArray);

/* you now have an array of objects. You'd now want to use the reduce function on the object */

const total = cartArray.reduce((prev, cur) => (cur.price * cur.quantity)   prev, 0);

total would be your cart total