How to Push Arrays in localStorage in a specific JSON Object format in REACT JS?

Question

I have a REACT JS Client side where I want to save Shopping Cart items in localStorage by using push method. I have an AddtoCart function which will Push the product details array of the product which is clicked, to localStorage JSON object CartObj.

But what I want is to have the entire CartObj of localStorage in a JSON Object format in which Products are grouped according to their CompanyNames (instead of just simple Strings).

When I Click "AddtoCart" button Im sending a single Product details in this format:

{
"SparePartID":"45",
"Name":"Lights",
"Price":"2300",
"VendorID": "48",
"CompanyName": "Master Automotives",
"Qty": 1,
"TotalPrice": "4500"
}

And what I want is to push this above item in CartObj JSON object in localStorage (CartObj is currently empty). And whenever any item is clicked, its data is pushed to the same CartObj. But I want to get this below format of data in my localStroage CartObj after few items are pushed in it. (items grouped by CompanyNames).

{
    "records": {
        "Master Automotives": [
            {
                "SparePartID": "43",
                "Name": "Oil and Lubricants",
                "Price": "4500",
                "VendorID": "48",
                "CompanyName": "Master Automotives",
                 "Qty": 1,
                 "TotalPrice": "4500"

            },
            {
                "SparePartID": "45",
                "Name": "Lights",
                "Price": "2300",
                "VendorID": "48",
                "CompanyName": "Master Automotives",
                 "Qty": 1,
                 "TotalPrice": "2300"
            }
        ],
        "Repair Solutions": [
            {
                "SparePartID": "47",
                "Name": "Steering Wheel",
                "Price": "1500",
                "VendorID": "60",
                "CompanyName": "Repair Solutions",
                 "Qty": 1,
                 "TotalPrice": "1500"
            }
        ],
        
         "FiveStar Automotives": [
            {
                "SparePartID": "51",
                "Name": "Brakes",
                "Price": "234",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "234"
            },
            {
                "SparePartID": "53",
                "Name": "Clutch",
                "Price": "999",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "999"
            },
              {
                "SparePartID": "55",
                "Name": "LED",
                "Price": "288",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "288"
            }
        ]
    }
}

CAN I DO IT by push method in localStroage or is there any other way to save data in localStorage in this format. I want this format coz I need to handle order placement of these products separately.

here is my ADdToCart method in REACT:

  AddToC(part){
    console.log("PartID to be added in cart: ", part); //this part shows details of a product in format I mentioned on very top.

    const alreadyInCart = JSON.stringify(localStorage.getItem('cartObj'));
    alreadyInCart.push(part);


  }

EDIT:

{this.state.spareParts.map((part, index) =>


<div>

  <h4 > {part.Name}  </h4>
  <h5> Rs. {part.Price}  </h5>


  <h5> {part.CompanyName} </h5>
<div>

  <button onClick={() => this.AddToCart(index, part.SparePartID)}
  Add to Cart
</button>

</div>


)}

const unsub = store.subscribe(() => localStorage.setItem("languages", JSON.stringify(store.getState().languages)) ); A simple example, how to store using redux, maybe you are saving the incorrect Object. try to save the records. — Edison Junior
– Edison Junior, Commented May 4, 2019 at 4:35
@EdisonJunior I dont want to use redux. Is there any other way? — YellowMinion
– YellowMinion, Commented May 4, 2019 at 4:51
it was a simple ex, you can use what you want, Where you store your records, can you share your code ? — Edison Junior
– Edison Junior, Commented May 4, 2019 at 4:55
@EdisonJunior I dont have "records" existing anywhere. Im just supposing this records JSON Object when user adds multiple items in the cart, then thats how the data should look like. I first wanna store all items on localStorage then store them in a state component — YellowMinion
– YellowMinion, Commented May 4, 2019 at 4:59

Narendra Chouhan · Accepted Answer · 2019-05-04 05:20:08Z

1

You can use react Context for the Global variable, can once you store the value in the react Contect you can access that value from any component tree, its like global varibale and easy to understand than redux. so best practice is to use React Context,

For more info you can go through the link

https://reactjs.org/docs/context.html

answered May 4, 2019 at 5:20

Narendra Chouhan

2,3091 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Push Arrays in localStorage in a specific JSON Object format in REACT JS?

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