I have an array data, using react-redux:

data = [{
    class: "A",
    seat: [
      { id: "A1", price: 7.5, status: false },
      { id: "A2", price: 7.5, status: false },
      { id: "A3", price: 7.5, status: false },
      { id: "A4", price: 7.5, status: false },
    ],
  },
  {
    class: "B",
    seat: [
      { id: "B1", price: 7.5, status: false },
      { id: "B2", price: 7.5, status: false },
      { id: "B3", price: 7.5, status: false },
      { id: "B4", price: 7.5, status: false },
    ],
  }
}

movieReducer:

    const stateMovie = {
      cart: [],
      data: data,
    };
    export const movieReducer = (state = stateMovie, action) => {
        case "ADD_TO_CART": {
  let cloneCart = [...state.cart];
  let index1 = cloneCart.findIndex((sp) => {
    return sp.id == action.seatItem.id;
  });
  let cloneData = [...state.data];
  if (index1 == -1) {
    cloneCart.push(action.seatItem);
    action.seatItem.status = "selecting";
  } 
  state.data = cloneData;
  state.cart = cloneCart;
  return { ...state };
}
case "REMOVE_FROM_CART": {
  let cloneCart = [...state.cart];
  cloneCart.splice(action.index, 1);
  let cloneData = [...state.data];
  state.data = cloneData;
  state.cart = cloneCart;
  return { ...state };
}
case "CONFIRM_BOOKING": {
  let cloneData = [...state.data]
  state.data = cloneData;
  return { ...state };
}

after i use button "ADD_TO_CART" to select a seat my state.data now become:

data = [{
    class: "A",
    seat: [
      { id: "A1", price: 7.5, status: false },
      { id: "A2", price: 7.5, status: false },
      { id: "A3", price: 7.5, status: false },
      { id: "A4", price: 7.5, status: false },
    ],
  },
  {
    class: "B",
    seat: [
      { id: "B1", price: 7.5, status: false },
      { id: "B2", price: 7.5, status: 'selecting' },
      { id: "B3", price: 7.5, status: false },
      { id: "B4", price: 7.5, status: false },
    ],
  }
}

in case "CONFIRM_BOOKING" my question is how can i change status in state.data with the seat i add to cart from "selecting" to "true"; i just have idea with 2 findIndex/map loop.

CodePudding user response：

you can do something like this

const data = [{
    class: "A",
    seat: [
      { id: "A1", price: 7.5, status: false },
      { id: "A2", price: 7.5, status: false },
      { id: "A3", price: 7.5, status: false },
      { id: "A4", price: 7.5, status: false },
    ],
  },
  {
    class: "B",
    seat: [
      { id: "B1", price: 7.5, status: false },
      { id: "B2", price: 7.5, status: false },
      { id: "B3", price: 7.5, status: false },
      { id: "B4", price: 7.5, status: false },
    ],
  }
]

const result = data.map(d => ({...d, seat: d.seat.map(s => s.id === 'B3'? {...s, status: true}: s)}))

console.log(result)

CodePudding user response：

You can iterate through the class objects in the array looking for the class to which the wanted seat belongs. Then fetch the seat object having the given id and change its properties. Since those are object are passed by reference, any change made to the fetched object will be made to the object in the original array.

I crafted a demo including a function that will fetch the wanted seat returning it.

The original data gets actually preserved by first deep cloning the source array that will be used to fetch and modify the seat object.

Ideas on how to clone the array can be found here:

How do you clone an array of objects in JavaScript?

I personally used: structuredClone

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

After obtaining the seat, the main caller changes its status before printing the original array to console.log:

data = [
  {
    class: "A",
    seat: [
      { id: "A1", price: 7.5, status: false },
      { id: "A2", price: 7.5, status: false },
      { id: "A3", price: 7.5, status: false },
      { id: "A4", price: 7.5, status: false },
    ],
  },
  {
    class: "B",
    seat: [
      { id: "B1", price: 7.5, status: false },
      { id: "B2", price: 7.5, status: false },
      { id: "B3", price: 7.5, status: false },
      { id: "B4", price: 7.5, status: false },
    ],
  }
];


//How do you clone an array of objects in JavaScript?
//https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascript
const clonedData = structuredClone(data);

const s = fetchSeat(clonedData, 'B3');
s.status = true;

console.log(data);
console.log(clonedData);

function fetchSeat(allSeats, id){
  const className = id.substring(0,1);
  const classSeats = allSeats.find(element => element.class == className);    
  const foundSeat = classSeats.seat.find(element => element.id == id);
  
  return foundSeat;
}