CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Fábio Santos
Fábio Santos

Reputation: 183

Failed to remove array element

I am creating a page that will filter some suggestions, where the user can vote for the ones that are most interesting to him.

I'm dividing this screen into 3 tabs [Top Rated], [Newest] and [My Votes] When starting the screen I make a call in the database that brings all the suggestions, I do it with axios

axios
      .get("/sugestoes/carregar/xxxx")
      .then(res => {
        this.sugestoesGeral = res.data.sugestoes

        for(var i=0; i < this.sugestoesGeral.length; i++){
          if(this.sugestoesGeral[i].meu_voto === "S"){
            this.meusVotos.splice(1, 0, this.sugestoesGeral[i])
          }
        }

        this.maisVotados     = [...this.sugestoesGeral]
        this.maisNovos       = [...this.sugestoesGeral] 
        this.ordernarArrVotos(this.maisVotados)
      })
      .catch(err => {
        console.log(err);
      });

This way I start my three different arrays from the first call in the database

When the user votes on a suggestion, I reorder the arrays according to their respective tab [Top Rated], [Newest] and [My Votes]

this.moreVoted and this.moreNew arrays are reordered without any problem. However I need to perform other actions with the array this.meusVotes besides simply reordering, I need to check if it removed a vote, if I have done this I need to remove this position from the array and then show it again to the user

To remove a position from the array I am doing the following:

for(var i=0; i < this.sugestoesGeral.length; i++){
        if(this.sugestoesGeral[i].meu_voto === 'N'){
          var length = this.meusVotos.length
          for(var x=0; x < length; x++){
            if(this.meusVotos[x].id_sugestao === this.sugestoesGeral[i].id_sugestao){
              this.meusVotos.splice(x, 1)
            }
          }
        }
      }

console.log(this.meusVotos)

However this way it has no effect and does not remove any position from my array. Just for testing I did as follows:

this.meusVotos.shift()
console.log(this.meusVotos)

But the result is the same, no elements are removed from the array. The most curious thing is that I made a copy of these arrays to test on the browser console and it works without errors. The following example works fine on the console:

Arrays:

sugestoesGeral = [
                    {
                        status_atual: "Em votação",
                        categoria: "Parâmetros",
                        quantidade_votos: 1,
                        meu_voto: "S",
                        id_sugestao: 16,
                        titulo: "Alerta de Valor Excedente por Cliente no MDF-e",
                        data_criacao: "29/01/2020",
                        descricao_resumida: "Alerta de Valor Excedente por Cliente no MDF-e",
                        motivo_rejeicao: "",
                        data_rejeicao: "",
                        data_implementacao: "",
                        data_previsao_execucao: "",
                        data_encerramento_votacao: "",
                        cor: "#b8dbff"
                    },
                    {
                        status_atual: "Em votação",
                        categoria: "Despesas",
                        quantidade_votos: 1,
                        meu_voto: "N",
                        id_sugestao: 7,
                        titulo: "Nova coluna Controle de Despesas",
                        data_criacao: "28/01/2020",
                        descricao_resumida: "Checar vínculo financeiro da Despesa quando vinculada a uma Nota com Financeiro lançado",
                        motivo_rejeicao: "",
                        data_rejeicao: "",
                        data_implementacao: "",
                        data_previsao_execucao: "",
                        data_encerramento_votacao: "",
                        cor: "#b8dbff"
                    }
                ]

meusVotos = [
                    {
                        status_atual: "Em votação",
                        categoria: "Parâmetros",
                        quantidade_votos: 1,
                        meu_voto: "S",
                        id_sugestao: 16,
                        titulo: "Alerta de Valor Excedente por Cliente no MDF-e",
                        data_criacao: "29/01/2020",
                        descricao_resumida: "Alerta de Valor Excedente por Cliente no MDF-e",
                        motivo_rejeicao: "",
                        data_rejeicao: "",
                        data_implementacao: "",
                        data_previsao_execucao: "",
                        data_encerramento_votacao: "",
                        cor: "#b8dbff"
                    },
                    {
                        status_atual: "Em votação",
                        categoria: "Despesas",
                        quantidade_votos: 1,
                        meu_voto: "N",
                        id_sugestao: 7,
                        titulo: "Nova coluna Controle de Despesas",
                        data_criacao: "28/01/2020",
                        descricao_resumida: "Checar vínculo financeiro da Despesa quando vinculada a uma Nota com Financeiro lançado",
                        motivo_rejeicao: "",
                        data_rejeicao: "",
                        data_implementacao: "",
                        data_previsao_execucao: "",
                        data_encerramento_votacao: "",
                        cor: "#b8dbff"
                    }
                ]

for loop to remove the element:

for(var i=0; i < this.sugestoesGeral.length; i++){
        if(this.sugestoesGeral[i].meu_voto === 'N'){
          var length = this.meusVotos.length
          for(var x=0; x < length; x++){
            if(this.meusVotos[x].id_sugestao === this.sugestoesGeral[i].id_sugestao){
              this.meusVotos.splice(x, 1)
            }
          }
        }
      }

Any help will be welcome

Upvotes: 3

Views: 116

Answers (2)

Bernardo Duarte
Bernardo Duarte

Reputation: 4254

I would suggest that you create an computed property for each of these cases: this.moreVoted, this.moreNew and this.meusVotes.

This way your sugestoesGeral becomes the SSOT of those properties.

computed: {
  maisVotados() {
    return this.sugestoesGeral.sort((a, b) => {
      if (a.quantidade_votos > b.quantidate_votos) return 1;
      else if (a.quantidate_votos < b.quantidade_votos) return -1;
      return 0;
    })
  },
  maisNovos() {
    return this.sugestoesGeral.sort((a, b) => {
      let dateParts = a.data_criacao.split("/");
      const dateA = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
      dateParts = b.data_criacao.split("/");
      const dateB = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
      if (dateA > dateB) return 1;
      else if (dateA < dateB) return -1;
      return 0;
    });
  }
},
methods: {
  reordenarSugestoes() {
    this.meusVotos = this.sugestoesGeral.filter((sugestao) => sugestao.meu_voto === 'S');
  }
}

Upvotes: 1

Mark Giblin
Mark Giblin

Reputation: 1106

try

for(var i=0; i < this.sugestoesGeral.length; i++){
   if(this.sugestoesGeral[i].meu_voto === 'N'){
      for(var x=0; x < this.meusVotos.length; x++){
         if(this.meusVotos[x].id_sugestao === this.sugestoesGeral[i].id_sugestao){
             this.meusVotos.splice(x, 1);
            }
          }
        }
      }

and see how you get on.

as I explained previously, the .splice() is the proper way to remove an element off an array. I suggest that you check that the value of x is a number and not exceeding the arrays length., it may be that you need to change the x < length to x < this.meusVotos.length as I understand, length is fixed and you modified the array without getting a new length value. the this.meusVotos.length is a live checked variable and the length is static, it stays the same if you modify the array, thus making x out of bounds at some point.

Upvotes: 1

Related Questions