Selecting specific object inside array of objects throwing undefined in Vuejs /Java app

Question

In this app im building i have a little problem referring to adress the SPA to the selected item by its id. Fetching my data to my end point(action) i got a array of objects , then through a getter i just grab all that data, and using the function find() i filter all the array throwing the object which contains the id referrig to the selected one.Lets say:

First- Exposing on the router the link and the condition of the id which demark the object to select

{
    path: '/game/selected/:gameCrabId',
    name: 'GameSelectedView',
    props:true,
    component: GameSelectedView,
    
  },

Second- Eexposing the component where in i access through router link the supposed object which contains the requested id

<v-btn router-link :to="`/game/selected/${game.game_id}`" >Access</v-btn>

Third-Initializing the view in general of the supposed selected object

<template>
  <v-container v-if="allGames">
    <!-- <div>{{gameSelected}}</div> -->
  </v-container>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  name: "GameSelectedview",
  props: ["gameCrabId"],
  data() {
    return {};
  },
  // props:{SelectedGameComponent:Object},
  methods: {
    ...mapActions(["allGames"])
  },
  computed: {
    ...mapGetters(["getSelectedGame"]),

    gameSelected() {
      return this.getSelectedGame(this.gameCrabId);
    }
  },
  async created() {
    await this.allGames;
    await this.gameSelected;
    await console.log(this.gameSelected);
    
  },
 
</script>

then on my state managment component (Vuex) , i trigger the method getter which eventually brings me once i click that button of step 2 , the object which has the same id than the required one, but first im exposing the state where in that array of objects is

state: {
    allGamesData: {all_games:[
    {"game_id": 1,"game_player": "Romi","game_score": 0},
    {"game_id": 2,"game_player": "Messi","game_score": 0},
    {"game_id": 3,"game_player": "CR7","game_score": 0},
   ]
},
},

   getters:{
    getSelectedGame: (state) => (gameCrabId) => {
      console.log(gameCrabId);

      return state.allGamesData.all_games.find((gameID) => {
        gameID.game_id === gameCrabId;
      });
    },
}

And this is the getter which eventuallly accesses the state and that array of objects , and using a double arrow function first aims to the state ,and second through the parameter (gameCrabId)which is the once that expose the id so neccesary to complete the link to that selected item;then returning the access to that array of objects in my state , i just use the function find() to establish a comparison between that id carried by the parameter (gameCrabId) and the array of objects brought from the state , breaking the cycle once find the first comparable item in the objects which match with that id gameID.game_id === gameCrabId

In order to see if ,my id carrier works i set a log , and works , the number is brought , but for any reason the filter find() throws me undefined in the object selected despite of already have the id once the comparison get settled, being imposible retrieve any information of that object

Answer 1

Missing return from find()

The callback to Array.prototype.find() must return a Boolean, but currently it returns nothing, so the result of find() would always be null:

return state.allGamesData.all_games.find((gameID) => {
  gameID.game_id === gameCrabId; // FIXME: No return statement
});

Mismatched types

game_id is a Number, but gameCrabId is a string, and getSelectedGame() uses === to compare the two, which requires the operands to have the same type. One solution is to perform explicit type conversion to ensure both operands are Number:

getters: {
  getSelectedGame: state => gameCrabId => {
    return state.allGamesData.all_games.find((gameID) => {
      // return gameID.game_id === gameCrabId;  // DON'T DO THIS
      return gameID.game_id === Number(gameCrabId);
    });
  }
}

demo