Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

algum santo me ajuda não esta funcionando meu código para verificar se já tem a api

então eu to pegando uma api pelo um objeto service e tentando filtrar todas as que já estão na _listaClientes para só mostrar na tela as novas adicionadas na api mas esta falhando e mostrando as que já tem.

    importarClientes() {
        this.service.get('http://localhost:4000/clientes')
        .then(cl => 
              cl.filter(cliente => 
                !this._listaClientes.clientes.some(clienteExistente => 
                JSON.stringify(cliente) == JSON.stringify(clienteExistente)))
        ).then(clientes => {
            clientes.forEach(cliente => this._listaClientes.add(cliente))
            this.showClientes()
        }).catch(console.log)
    }

esse showClientes() ele pega a lista e mostra na tela cada objeto que foi adicionado nela.

pf me ajudem ai eu não sei o que estou errando e estou ficando louco.

[OBS: se vc pegar JSON.stringify(cliente) e deixar errado o nome cliente ele funciona normalmente mas da erro no console de reference mas pq funciona??]

7 respostas

Fala, Miguel! Tudo bem?

Opa, acho que você pode usar o método includes() do array pra testar essa sua condição:

importarClientes() {
    this.service.get('http://localhost:4000/clientes')
      .then(cl => cl.filter(cliente => !this._listaClientes.clientes.includes(cliente)))
      .then(clientes => {
        clientes.forEach(cliente => this._listaClientes.add(cliente))
        this.showClientes()
      }).catch(console.log)
}

Vê se funciona pra você!

Abraços!

não amigo. se vc pegar e criar dois arrays de objetos indenticos e comparar com sinal de igual da false testa esse exemplo aqui. no console ou ne um editor de texto.

const api1 = [
   { nome: "nome1", idade: "20"},
    { nome: "nome2", idade: "10"}
]

const api2 = [
  { nome: "nome1", idade: "20"},
    { nome: "nome2", idade: "10"}
]

console.log( api1 == api2 ) //retorna false
console.log( api1.includes( api2[0] ) ) //retorna false 

agora se vc transforma o array de objetos em texto ele fica valido para fazer comparações ex:

api1.filter(itens => 
!api2.some(itensExistente => 
JSON.stringify(itens) == JSON.stringify(itensExistente)))

/* retorna nada pq todos os itens existe e 
estou filtrando os que não existe
*/

ele filtrar todos os itens que não existe pode testa. sé vc não sabe o que faz cada uma dessas propriedades te recomendo um canal click aqui.

o meu problema é que ela não esta funcionando no meu código de jeito nenhum e eu não tenho a minima ideia pq eu to precisando muito de ajuda.

Fala ai Miguel, tudo bem? Realmente comparar objetos é um pouco chato, isso porque por padrão com os === o JavaScript vai comparar suas referências e endereços de memória, que vão ser diferentes, por isso que ele retorna false.

Um jeito simples seria você convertê-los para string e verificar da forma como você está fazendo. Existem outras N maneiras e até bibliotecas que fazem isso para a gente de forma performática, por exemplo a Lodash: https://lodash.com/docs/4.17.15#isEqual

Sobre o código, o problema está na sua cadeia de then, isso porque o primeiro then está retornando um array filtrado com o filter e não outra Promise para que seja possível realizar o segundo .then, tente fazer tudo no mesmo then:

importarClientes() {
    this.service.get('http://localhost:4000/clientes')
        .then(cl => 
            const clientes = cl.filter(cliente => !this._listaClientes.clientes.some(clienteExistente => JSON.stringify(cliente) == JSON.stringify(clienteExistente)))
            clientes.forEach(cliente => this._listaClientes.add(cliente))
            this.showClientes()
        ).catch(console.log)
}

Espero ter ajudado.

então mano o código que vc fez vc esqueceu os {} mas ai eu corrigir e não funcionou eu estou disponibilizando o código completo do projeto aqui: aqui.

me ajuda pf : (

solução!

Fala ai Miguel, dei uma olhada no projeto e posso dizer que o código de filtrar os clientes ja existentes na lista esta certinho, não tem nenhum erro.

O problema está na sua função showClientes, isso porque ela sempre adiciona novos clientes na tabela e o problema é que sua função importarClientes está sendo chamada cinco vezes por padrão (o que também é um problema).

Dai, a função showClientes vai percorrer todos os clientes cinco vezes.

Para resolver, você pode limpar a tabela sempre antes de percorrer a lista de clientes:

// ...
const tableBody = document.querySelector("#table__body");
tableBody.innerHTML = '';
this._listaClientes.clientes.forEach((cliente) => { ... })
// ...

E além disso, você pode pode apenas chamar a função showClientes caso tenha novos clientes:

// ...
clientes.forEach(cliente => this._listaClientes.add(cliente))
if (clientes.length) {
    this.showClientes()
}
// ...

Espero ter ajudado.

Mano vc esta certo, mas eu vou te falar uma coisa, eu ia vim aqui pq eu fiz a mesma coisa que vc disse em baixo antes, e ia falar como eu fiz e resolver o tópico ksksks eu to muito feliz por ter resolvido antes sozinho mais muito obrigado cara vc é foda. eu fiz a importação 5 vezes para testa se a filtração ta funcionando. :)

minha vida ta salva de verdade era muito importante eu aprender fetch so preciso aprender async ou algo assim.

Boa Miguel, fico feliz que tenha conseguido resolver, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.