search object from within an array by value of an attribute

Question

I have two arrays, an array has the following format:

todasAsCartas:[
            { id: 1, 'valor': 2, 'naipe': 'Paus'   },  { id: 2, 'valor': 2, 'naipe': 'Copas'   },  { id: 3, 'valor': 3, 'naipe': 'Espadas'   },  { id: 4, 'valor': 2, 'naipe': 'Ouros'   },
            { id: 5, 'valor': 3, 'naipe': 'Paus'   },  { id: 6, 'valor': 3, 'naipe': 'Copas'   },  { id: 7, 'valor': 3, 'naipe': 'Espadas'   },  { id: 8, 'valor': 3, 'naipe': 'Ouros'   },
            { id: 9, 'valor': 4, 'naipe': 'Paus'   },  { id: 10, 'valor': 4, 'naipe': 'Copas'  },  { id: 11, 'valor': 4, 'naipe': 'Espadas'  },  { id: 12, 'valor': 4, 'naipe': 'Ouros'  },
            { id: 13, 'valor': 5, 'naipe': 'Paus'  },  { id: 14, 'valor': 5, 'naipe': 'Copas'  },  { id: 15, 'valor': 5, 'naipe': 'Espadas'  },  { id: 16, 'valor': 5, 'naipe': 'Ouros'  },
            { id: 17, 'valor': 6, 'naipe': 'Paus'  },  { id: 18, 'valor': 6, 'naipe': 'Copas'  },  { id: 19, 'valor': 6, 'naipe': 'Espadas'  },  { id: 20, 'valor': 6, 'naipe': 'Ouros'  },
            { id: 21, 'valor': 7, 'naipe': 'Paus'  },  { id: 22, 'valor': 7, 'naipe': 'Copas'  },  { id: 23, 'valor': 7, 'naipe': 'Espadas'  },  { id: 24, 'valor': 7, 'naipe': 'Ouros'  },
            { id: 25, 'valor': 8, 'naipe': 'Paus'  },  { id: 26, 'valor': 8, 'naipe': 'Copas'  },  { id: 27, 'valor': 8, 'naipe': 'Espadas'  },  { id: 28, 'valor': 8, 'naipe': 'Ouros'  },
            { id: 29, 'valor': 9, 'naipe': 'Paus'  },  { id: 30, 'valor': 9, 'naipe': 'Copas'  },  { id: 31, 'valor': 9, 'naipe': 'Espadas'  },  { id: 32, 'valor': 9, 'naipe': 'Ouros'  },
            { id: 33, 'valor': 10, 'naipe': 'Paus' },  { id: 34, 'valor': 10, 'naipe': 'Copas' },  { id: 35, 'valor': 10, 'naipe': 'Espadas' },  { id: 36, 'valor': 10, 'naipe': 'Ouros' },
            { id: 37, 'valor': 11, 'naipe': 'Paus' },  { id: 38, 'valor': 11, 'naipe': 'Copas' },  { id: 39, 'valor': 11, 'naipe': 'Espadas' },  { id: 40, 'valor': 11, 'naipe': 'Ouros' },
            { id: 41, 'valor': 12, 'naipe': 'Paus' },  { id: 42, 'valor': 12, 'naipe': 'Copas' },  { id: 43, 'valor': 12, 'naipe': 'Espadas' },  { id: 44, 'valor': 12, 'naipe': 'Ouros' },
            { id: 45, 'valor': 13, 'naipe': 'Paus' },  { id: 46, 'valor': 13, 'naipe': 'Copas' },  { id: 47, 'valor': 13, 'naipe': 'Espadas' },  { id: 48, 'valor': 13, 'naipe': 'Ouros' },
            { id: 49, 'valor': 14, 'naipe': 'Paus' },  { id: 50, 'valor': 14, 'naipe': 'Copas' },  { id: 51, 'valor': 14, 'naipe': 'Espadas' },  { id: 52, 'valor': 14, 'naipe': 'Ouros' },

        ],

and the other array is an empty array, thus:

cartasNaMao: [],

I need to draw a card, which is an object within the "all Cards" array and send it to the "cards" array".

Only that I need to search by the card id. I have tried to do by the array but only the error.

The rest of the code is here, I’m using the Vuetify framework:

<template>

  <v-expansion-panel dark>
    <v-expansion-panel-content>
      <template v-slot:header>
        <v-btn>
            <div>Start</div>
        </v-btn>
      </template>
      <v-card height="400px"  full-width>

        <v-btn class="botaoEstilizado" @click="sacarCartaDoMonte">
            + 1
        </v-btn>

        <v-card class="ma-4" v-bind="numeroAleatorioGerado">
              <h3>Número aleatório gerado</h3>
            <p>
              {{ numeroAleatorioGerado }}
            </p>
        </v-card>

        <v-card class="ma-4" v-bind="cartasNaMao">
              <h3>Cartas na Mão</h3>
            <p>
              {{ cartasNaMao }}
            </p>
        </v-card>

        <!-- <v-btn class="botaoEstilizado" @click="mostrarCarta">
            Show
        </v-btn> -->

        <!-- abaixo está o codigo para importar imagem da carta  -->
        <!-- <v-img v-bind="umaCarta" :src="umaCarta.imgCarta" height="100px" width="100px" class="mx-4"></v-img> -->

        <div>
          <v-card class="ma-4" v-bind="baralho">
                <h3>Baralho</h3>
              <p>
                {{ baralho }}
              </p>
          </v-card>
        </div>

      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>

</template>


<script>

export default {

    data: () => ({

        baralho: [],

        // Abaixo está o Código para importar uma imagem bindada com a tag v-img lá de cima do template
        // umaCarta: { "imgCarta": "https://i.ibb.co/7XsXX6G/doisdeouros.png" },

        numeroAleatorioGerado: [],

        todasAsCartas:[
            { id: 1, 'valor': 2, 'naipe': 'Paus'   },  { id: 2, 'valor': 2, 'naipe': 'Copas'   },  { id: 3, 'valor': 3, 'naipe': 'Espadas'   },  { id: 4, 'valor': 2, 'naipe': 'Ouros'   },
            { id: 5, 'valor': 3, 'naipe': 'Paus'   },  { id: 6, 'valor': 3, 'naipe': 'Copas'   },  { id: 7, 'valor': 3, 'naipe': 'Espadas'   },  { id: 8, 'valor': 3, 'naipe': 'Ouros'   },
            { id: 9, 'valor': 4, 'naipe': 'Paus'   },  { id: 10, 'valor': 4, 'naipe': 'Copas'  },  { id: 11, 'valor': 4, 'naipe': 'Espadas'  },  { id: 12, 'valor': 4, 'naipe': 'Ouros'  },
            { id: 13, 'valor': 5, 'naipe': 'Paus'  },  { id: 14, 'valor': 5, 'naipe': 'Copas'  },  { id: 15, 'valor': 5, 'naipe': 'Espadas'  },  { id: 16, 'valor': 5, 'naipe': 'Ouros'  },
            { id: 17, 'valor': 6, 'naipe': 'Paus'  },  { id: 18, 'valor': 6, 'naipe': 'Copas'  },  { id: 19, 'valor': 6, 'naipe': 'Espadas'  },  { id: 20, 'valor': 6, 'naipe': 'Ouros'  },
            { id: 21, 'valor': 7, 'naipe': 'Paus'  },  { id: 22, 'valor': 7, 'naipe': 'Copas'  },  { id: 23, 'valor': 7, 'naipe': 'Espadas'  },  { id: 24, 'valor': 7, 'naipe': 'Ouros'  },
            { id: 25, 'valor': 8, 'naipe': 'Paus'  },  { id: 26, 'valor': 8, 'naipe': 'Copas'  },  { id: 27, 'valor': 8, 'naipe': 'Espadas'  },  { id: 28, 'valor': 8, 'naipe': 'Ouros'  },
            { id: 29, 'valor': 9, 'naipe': 'Paus'  },  { id: 30, 'valor': 9, 'naipe': 'Copas'  },  { id: 31, 'valor': 9, 'naipe': 'Espadas'  },  { id: 32, 'valor': 9, 'naipe': 'Ouros'  },
            { id: 33, 'valor': 10, 'naipe': 'Paus' },  { id: 34, 'valor': 10, 'naipe': 'Copas' },  { id: 35, 'valor': 10, 'naipe': 'Espadas' },  { id: 36, 'valor': 10, 'naipe': 'Ouros' },
            { id: 37, 'valor': 11, 'naipe': 'Paus' },  { id: 38, 'valor': 11, 'naipe': 'Copas' },  { id: 39, 'valor': 11, 'naipe': 'Espadas' },  { id: 40, 'valor': 11, 'naipe': 'Ouros' },
            { id: 41, 'valor': 12, 'naipe': 'Paus' },  { id: 42, 'valor': 12, 'naipe': 'Copas' },  { id: 43, 'valor': 12, 'naipe': 'Espadas' },  { id: 44, 'valor': 12, 'naipe': 'Ouros' },
            { id: 45, 'valor': 13, 'naipe': 'Paus' },  { id: 46, 'valor': 13, 'naipe': 'Copas' },  { id: 47, 'valor': 13, 'naipe': 'Espadas' },  { id: 48, 'valor': 13, 'naipe': 'Ouros' },
            { id: 49, 'valor': 14, 'naipe': 'Paus' },  { id: 50, 'valor': 14, 'naipe': 'Copas' },  { id: 51, 'valor': 14, 'naipe': 'Espadas' },  { id: 52, 'valor': 14, 'naipe': 'Ouros' },

        ],

        cartasNaMao: []

    }),

    mounted: function(){
        this.baralho = this.todasAsCartas;

    },

    methods: {

        removerCartaDoMonte(array, refId){

          array = this.todasAsCartas
          refId = Math.floor(Math.random() * this.todasAsCartas.length)
          console.log("this.todasAsCartas.length antes do for: " + this.todasAsCartas.length)
          console.log("1º console - refId antes, recebendo apenas o numero aleatorio: " + refId)

          for (let i = 0; i <= array.length; i++){
            if(array[i].id == refId){
              console.log('2º console -  entrei no if, ver qual o valor de refId após entrar no if: ' + array[i].id + ' = ' + refId);
              this.todasAsCartas.splice(array[i-1].id, 1);
              this.cartasNaMao.push(array[i - 1])
              console.log("this.todasAsCartas.length depois do for: " + this.todasAsCartas.length)
              break;

            }

          }

        },

        sacarCartaDoMonte(){
            this.removerCartaDoMonte();
        }

    }

}

</script>


<style>

.botaoEstilizado {
  text-decoration: none;
  font-size: 18pt;
  color: red;

}

</style>

Answer 1

You should have posted the error that appears to you.

Removing all the paraphernalia from the framework, your code works in my browser without errors, except when the random number is zero. But there are some things in your code that don’t make sense to me:

'Cause you pass and get the refId', se ao invés de usar o valor dele, você vai jogar um valor aleatório nessa variável? Pra que você percorre oforatrás dorefId, se você pode simplesmente usar orefId` as array index?

I suggest you run tests without this framework, either on a page on your web server or in Jsfiddle.