Alert() not working correctly in else statement

Question

When I enter a random string into my user input that does not match with the genre obj the alert comes up. But when I enter a valid input that matches the alert (not valid genre) still pops up. and does not go through the if statement.

example: the user enters: horror which is a valid input should be returning all the list of movies but instead the alert still comes up saying its not a valid genre.

the else statement comes up whether the if statement equals genre[i].name

$('#submitButton').click(function(){

          reset();

          // getting genre from user
          let genreSubmission = $('#inputSearch').val().toLowerCase();
          let genreId = 0;


          // api genre ids objects to change the api link
          const genre = [
            {
              "id": 28,
              "name": "Action"
            },
            {
              "id": 12,
              "name": "Adventure"
            },
            {
              "id": 16,
              "name": "Animation"
            },
            {
              "id": 35,
              "name": "Comedy"
            },
            {
              "id": 80,
              "name": "Crime"
            },
            {
              "id": 99,
              "name": "Documentary"
            },
            {
              "id": 18,
              "name": "Drama"
            },
            {
              "id": 10751,
              "name": "Family"
            },
            {
              "id": 14,
              "name": "Fantasy"
            },
            {
              "id": 36,
              "name": "History"
            },
            {
              "id": 27,
              "name": "Horror"
            },
            {
              "id": 10402,
              "name": "Music"
            },
            {
              "id": 9648,
              "name": "Mystery"
            },
            {
              "id": 10749,
              "name": "Romance"
            },
            {
              "id": 878,
              "name": "Science Fiction"
            },
            {
              "id": 10770,
              "name": "TV Movie"
            },
            {
              "id": 53,
              "name": "Thriller"
            },
            {
              "id": 10752,
              "name": "War"
            },
            {
              "id": 37,
              "name": "Western"
            }];

          for (let index = 0; index < genre.length; index++) {
              if(genreSubmission === genre[index].name.toLowerCase()){
                genreId = genre[index].id;
                console.log(genreId);
              } else{
                return alert("not a valid genre");
              }
          };

Answer 1

Let's say you type Adventure.

1. You enter the loop and index is 0
2. genre[0].name is Action which is not Adventure
3. So you return alert("not a valid genre"); which
   • Alerts
   • Exits the function (because that is what return does)

Since you exited the loop, index is never incremented to 1 and you never find the match.

---

You need to search the entire array without finding a match before giving up and alerting and returning.

While you could do this with a for loop, arrays have a built-in method for doing this:

const match = genre.find( 
    element => element.name.toLowerCase() === genreSubmission 
);
if (match) {
    console.log(match.id);
} else {
    return alert("not a valid genre");
}