4
respostas

Meu cliente.js não consegue ler meu fetch , retorna UNDEFINED

Olá colegas.

Estou fazendo o curso de API REST e não consigo fazer meu código ler a api rest. Seguem meus arquivos: clientes.js

listClients = () => {
    return fetch('http://localhost:4000/clientes')
    .then( resposta => {
        return resposta.json()
    })
    .then( json => {
        return json 
    })
}

e listagem-cliente.js

const tableBody = document.querySelector("[data-table-content]")

const showClient = (nif, name) => {
    const line = document.createElement('tr')
    const lineContent = `
    <td>${nif}</td>
    <td>${name}</td>
    `
    line.innerHTML = lineContent
    return line
}

listClients().then( showLine => {
    showLine.forEach( index => {
        tableBody.appendChild(showClient(index.nif, index.name))
    })
}) 

Tanto o nif quanto o name aparecem com UNDEFINED no browser. Estou há muito tempo nesse problema e nada. Muito obrigado

4 respostas

Alguem tem alguma sugestão?

Fiz algumas alterações no código e ainda continuo com um erro semelhante. Mas agora eu identifiquei que o erro surge após acrescentar o listClients() na apresentação das linhas com os clientes.

listClients().then( show => {
    show.map( index => {
        tableBody.appendChild(showClient(index.nif, index.name))
    })
}

O erro:

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': cannot convert to dictionary.
    at listClients (clientes.js:2)
    at listagem-clients.js:13

Seguem os arquivos com minhas alterações:

clientes.js

listClients = () => {
    return fetch('http:localhost:4000/clientes', 
        method = 'get')
    .then( answer => {
        return answer.json()
    })
    .then( json => {
        return json
    })
}

listagem-cliente.js

const tableBody = document.querySelector("[data-table-content]")

const showClient = (nif, name) => {
    const line = document.createElement('tr')
    const lineContent = `
    <td>${nif}</td>
    <td>${name}</td>
    `
    line.innerHTML = lineContent
    return line
}

listClients().then( show => {
    show.map( index => {
        tableBody.appendChild(showClient(index.nif, index.name))
    })
}
)

Muito obrigado desde já.

Olá pessoal. Eu acredito que o problema está no node/npm. Já utilizei as versões 10.x, 12.x e 15.x e sempre tenho problemas quando vou instalar o "npm install". O que prova isto é que nem os arquivos disponibilizados da aula funcionam. Aparece mensagens de erro nos pacotes com a sugestão de corrigir com

npm audit fix
e
npm audit fix --force

Eu os utilizo, os pacotes são corrigidos e roda o "npm start". mas não consigo ler corretamente o meu backend. Todos meus clientes continua aparecendo como UNDEFINED.

Já procurei demais por uma solução no stackoverflow, mas ainda não consegui. Alguém sabe o que pode ser?

Fala Salatiel, tudo bem? Olhando o código, o mesmo está com uma sintaxe errada, seu código:

return fetch('http:localhost:4000/clientes', method = 'get')

Deveria ser:

return fetch('http:localhost:4000/clientes')

Isso porque por padrão a Fetch API vai realizar uma requisição do tipo GET.

Espero ter ajudado.