Question 74490 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Element is not inserting into array in a loop and also looping twice JS/React – Reactjs

I try to insert a string into a particular index of object if condition is true inside a forloop but its not inserting of some reason. I tried to use push and append and splice but splice just inserting entire string as an new object into the array and i need it to just append to existing object. Any ideas how to make it work?

Data looks like that:
Data

 const [concerts, setConcerts] = useState([]);
  const [tickets, setTickets] = useState([]);
  const [limit, setLimit] = useState(25);
  const navigate = useNavigate();
  const [button, setButton] = useState(false);
  const [array, setArray] = useState([]);

  //Raw JSON Date example:  "2023-02-08T23:15:30.000Z"
  let currentDate = new Date().toJSON().slice(0, 10);
  const json = { available: "true" };

  useEffect(() => {
    const loadConcerts = async () => {
      const resConcerts = await axios.get("/data/concerts");
      const resTickets = await axios.get("/data/tickets");
      let table = [];

      setTickets(resTickets.data);

      // getting all concerts above today
      const filteredData = resConcerts.data.filter((concert) => {
        return concert.datum >= currentDate;
      });

      filteredData.forEach((element) => {
        table.push(element);
        // table.splice(10, 0, { status: "available" });
      });

      setArray(table);

      for (let i = 0; i < resTickets.data.length; i++) {
        for (let j = 0; j < filteredData.length; j++) {
          if (
            resTickets.data[i].concertid == filteredData[j].id &&
            resTickets.data[i].booked == 0
          ) {
            table.push({ status: "avaiable" });
            // table.splice(10, 0, { status: "available" });
          }
        }
      }

      setArray(table);

      // filteredData.forEach((concert) => {
      //   for (const ticket of tickets) {
      //     if (concert.id == ticket.concertid && ticket.booked == 0) {
      //       table.push(json);
      //     }
      //   }
      // });

      setConcerts(
        filteredData.sort((a, b) =>
          a.datum > b.datum ? 1 : a.datum < b.datum ? -1 : 0
        )
      );
    };
    console.log("from use effect: " + array.length);
    loadConcerts();
  }, []);

After using splice method:
splice

Update
Problem is solved. I used Object.assign() helped to append string to existing object in array. Actually i had to insert another object, not a single variable.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Problem solved. Push() neither splice() method didn't helped. What helped me to append my object to another object without changing the data was Object.assign() function

     for (let i = 0; i < resTickets.data.length; i++) {
        for (let j = 0; j < filteredData.length; j++) {
          if (
            resTickets.data[i].concertid == filteredData[j].id &&
            resTickets.data[i].booked == 0
          ) {
            Object.assign(filteredData[j], obj);
          }
        }
      }

  2. 0

    The problem is you are trying to push a string "available" into an array-of-objects.

    Here you see the object with a property datum:

    const filteredData = resConcerts.data.filter((concert) => {
  return concert.datum >= currentDate;
});

    Yet below when you push, you are not pushing an object into the array which is problematic. It should probably be something like this but you have to verify:

    Instead of this:

    filteredData.push("available");

    Domething like this:

    filteredData.push({ datum: '', status: 'available' );

    I don’t know what your data object is but it’s an object not a string you need to add to that array.

    The looping twice is likely from React 18 New Strict Mode Behaviors. It intentionally unmounts/remounts components to fire your useEffect calls twice – so that you can identify problematic side effects. If you remove <StrictMode> or run in production that double-looping should not occur.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search