SyntaxError: JSON.parse: unexpected non-whitespace character-CodePudding

So I am currently working on an ecommerce website and I am adding the orders to a string of objects in localStorage. The orders are successfully being stored. however, when I try display them dynamically in the carts page, I try use JSON.parse which results in the following error: SyntaxError: JSON.parse: unexpected non-whitespace character

My code is as follows: The Add Order Page:

const addOrder = (e) => {
e.preventDefault(); 
console.log("click");

let payload = {
  productName:productData.productName,
  // productId:productData.productId,
    price:  productData.productPrice,
    clientEmail: sessionStorage.getItem("user"),
    quantity:  formValues['quantity'],
    productColour: formValues['productColor'],
    size:  formValues['size']
}
let cart = localStorage.getItem('productsInCart');
if(!cart){
  console.log("Cart is empty");
  let array = [];
  let stringData = JSON.stringify(payload)
  array.push(stringData);
  localStorage.setItem('productsInCart',array);
}else{
  console.log("item in cart");
  console.log(cart);
  let data = [];
  data.push(cart);
  let stringData = JSON.stringify(payload)
  data.push(stringData);
  
  localStorage.setItem('productsInCart',data);
  console.log( localStorage.getItem('productsInCart'));
}
}

My Carts Page:

const [orders, setOrders] = useState();
const [total, setTotal] = useState();
const [shipping, setShipping] = useState();
const [updateOrders, setUpdateOrders] = useState();

useEffect(()=>{
  
 let cartData =[];
    let productData = JSON.parse(localStorage.getItem('productsInCart'));
    console.log(productData);
    cartData.push(productData);

    // console.log(productData);
    console.log(cartData);
  
    
    let renderOrders = cartData.map((item) => <Orders productColour={item.productColour} quantity={item.quantity} price={item.price}  editRender={setUpdateOrders}/>)
    setOrders(renderOrders);
    setUpdateOrders(false);

  },[updateOrders]);

The Data appears as follows in localStorage:

{"productName":"Indoor Roller","price":2750,"clientEmail":"[email protected]","quantity":2,"productColour":"pink","size":6},{"productName":"Indoor Roller","price":2750,"clientEmail":"[email protected]","quantity":1,"productColour":"pink","size":5},{"productName":"Indoor Roller","price":2750,"clientEmail":"[email protected]","quantity":2,"productColour":"purple","size":6},{"productName":"Indoor Roller","price":2750,"clientEmail":"[email protected]","quantity":1,"productColour":"blue","size":5},{"productName":"Indoor Roller","price":2750,"clientEmail":"[email protected]","quantity":2,"productColour":"pink","size":6},{"productName":"Indoor Roller","price":2750,"clientEmail":"[email protected]","quantity":2,"productColour":"pink","size":6}

Note: the square brackets to indicate an array are not appearing in the localStorage.

CodePudding user response：

You are adding stringified items to js array and storing it in localStorage. So when you get it in carts page you try to parse js array.

You can first add item to the array and then stringify it


const cart = JSON.parse(localStorage.getItem('productsInCart'));

if(!cart){
  console.log("Cart is empty");

  const array = [payload];
  const string = JSON.stringify(array);
  localStorage.setItem('productsInCart', string);
}else{
  console.log("item in cart");
  console.log(cart);

  const newArray = [...cart, payload];
  const string = JSON.stringify(newArray);
  localStorage.setItem('productsInCart',string);

  console.log( localStorage.getItem('productsInCart'));
}