Formatting a javascript function to map matches into timegroups

Question

I've been working on the below function that is supposed to sort a set of matches into timeslots, and ensure a team can't be playing twice at once. However when running I'm having problems with the list of teams being emptied and then the program crashing. The state of the component before I hit run is like this I've put my code below and commented it so hopefully it makes sense.

 assignTime(){
        let matches=this.state.matches;
        console.log(matches);

        let table = [];
        let timeslots = this.state.timeLabels;
        console.log(timeslots);
        let pitches = this.state.pitches;
        console.log(pitches);

        for (let slot =0; slot<timeslots.length; slot++){ //this code block runs through every time slot
            let slotMatches=[];
            let slotTeams= [];
            let skippedMatches =[];
            for (let pitchNo = 0; pitchNo<pitches.length; pitchNo++) { //running through the available pitches
                let match = matches[0];//getting first match from the list
                    while (slotTeams.includes(match.teamA) || slotTeams.includes(match.teamB)) { //if one of the teams is already scheduled for that slot
                        skippedMatches.push(match); //skip this match
                        let index = matches.indexOf(match);
                        matches.splice(index, 1); //remove that match temporarily from the list
                        match = matches[0]; //get the next match up
                    }
                    slotMatches.push(match); //if it passes the while loop, you can assign it to that time
                    let index = matches.indexOf(match);
                    matches.splice(index, 1); //remove the match
                    slotTeams.push(match.teamA, match.teamB); //put the teams into the list of teams scheduled for that time
                }
                matches = skippedMatches.concat(matches); //once you get past the timeslot, add the skipped matches back
                table.push(slotMatches); //put the slot matches into the overall table
        }
        this.setState({table});
    }

I believe the error occurs when there are no more matches in the list, and the console gives this error: TypeError: match is undefined. I've been trying to figure out a way to end when all the matches are sorted, but I'm at a lost for now.

EDIT: After Changing to the code in the answer below, it runs but certain matches are populated into the table multiple times:

Answer 1

The simplest fix to your problem is to check if there is a match before running your 'while' loop. That looks something like this:

assignTime(){
  let matches=this.state.matches;
  console.log(matches);

  let table = [];
  let timeslots = this.state.timeLabels;
  console.log(timeslots);
  let pitches = this.state.pitches;
  console.log(pitches);

  for (let slot =0; slot<timeslots.length; slot++){ //this code block runs through every time slot
      let slotMatches=[];
      let slotTeams= [];
      let skippedMatches =[];
      for (let pitchNo = 0; pitchNo<pitches.length; pitchNo++) { //running through the available pitches
          let match = matches[0];//getting first match from the list

          if (match) {
                while (slotTeams.includes(match.teamA) || slotTeams.includes(match.teamB)) { //if one of the teams is already scheduled for that slot
                    skippedMatches.push(match); //skip this match
                    let index = matches.indexOf(match);
                    matches.splice(index, 1); //remove that match temporarily from the list
                    match = matches[0]; //get the next match up
                }
                slotMatches.push(match); //if it passes the while loop, you can assign it to that time
                let index = matches.indexOf(match);
                matches.splice(index, 1); //remove the match
                slotTeams.push(match.teamA, match.teamB); //put the teams into the list of teams scheduled for that time
            }
            matches = skippedMatches.concat(matches); //once you get past the timeslot, add the skipped matches back
            table.push(slotMatches); //put the slot matches into the overall table
        }
  }
  this.setState({table});
}

However, in general your code could be greatly simplified and suggests that you might want to brush up on some JavaScript fundamentals. Happy coding!