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

Erro no map

Fiz este curso normalmente usando o servidor local e tudo funcionou, porém decidi fazer novamente, mas usando um serviço que foi feito em java que também está local, mas retorna outra url, sendo assim creio que não preciso usar o Node e sim o mySql que é o que estou fazendo.

Está acontecendo um erro que não consigo identificar.

Quando eu faço a requisição e olho no console, ele me devolve no console.log o array com a lista que a aplicação em JAVA disponibiliza. Até aí tudo bem, mas quando vou fazer o parse ele me diz que "JSON.parse(...).map is not a function". Revisei o código umas 200 vezes e não consigo encontrar o erro.

Gostaria de saber se ele acontece por eu não estar usando o serviço disponibilizado pelo curso e sim o serviço em JAVA.

4 respostas

Oi Francis, tudo bem? Posta o código aqui se puder pra gente dar uma analisada? Mostra também um exemplo de como o serviço Java está retornando esse JSON por favor?

O serviço java está retornando assim:

{"id":10,"nome":"Francis","sobrenome":"da Luz","sexo":null,"email":"francisvagnerdaluz@gmail.com","senha":null,"cpf":"04566932621","perfil":null,"cep":null,"rua":null,"bairro":null,"cidade":null,"estado":null,"dataNascimento":"1890-10-23","grauEscolaridade":null,"telefone":null,"celular":null,"quantidadeConvite":null}

Não sei se conseguirá entender as minhas classes, pois modifiquei tudo e coloquei em português para conseguir entender melhor, mas vou postar as classes que acho que sejam relacionadas ao problema e obrigado por responder Wanderson

MEU INDEX

<!DOCTYPE html>

© 2017 daLvz Aplicativos ilimitados

MINHA CLASSE USUARIO QUE CORRESPONDE A CLASSE NEGOCIACAO

class Usuario {

constructor(nome, sobrenome, data, cpf, email) {

this._nome = nome; this._sobrenome = sobrenome; this._data = new Date(data.getTime()); this._cpf = cpf; this._email = email; Object.freeze(this); }

get nome() {

return this._nome; }

get sobrenome() {

return this._sobrenome; }

get data() {

return new Date(this._data.getTime()); }

get cpf() {

return this._cpf; }

get email() {

return this._email; } }

MINHA CLASSE USUARIOCONTROLE QUE CORRESPONDE A NEGOCIACOESCONTROLLER

class UsuarioControle {

constructor() {

this._insereNome = N('#nome'); this._insereSobrenome = N('#sobrenome'); this._insereData = N('#nascimento'); this._insereCPF = N('#cpf'); this._insereEmail = N('#email');

this._listarUsuarios = new Bind( new ListarUsuarios(), new UsuariosCliente(N('#usuariosCliente')), 'adiciona', 'esvazia');

this._mensagem = new Bind(new Mensagem(), new MensagensCliente(N('#mensagem-cliente')), 'texto');

}

adiciona(event) {

event.preventDefault();

this._listarUsuarios.adiciona(this._criaUsuario()); this._mensagem.texto = 'Usuário adicionado com sucesso!'; this._limpaFormulario(); }

importarUsuarios() {

let servico = new UsuarioServico(); servico.obterUsuario((erro, usuarios) => { if(erro) { this._mensagem.texto = erro; return; }

usuarios.forEach(usuario = this._listarUsuarios.adiciona(usuario)); this._mensagem.texto = 'Usuários importados com sucesso'; });

}

apaga() {

this._listarUsuarios.esvazia(); this._mensagem.texto = 'Lista removida com sucesso!'; }

_criaUsuario() {

return new Usuario( this._insereNome.value, this._insereSobrenome.value, SuporteData.textoParaData(this._insereData.value), this._insereCPF.value, this._insereEmail.value ); }

_limpaFormulario() {

this._insereNome.value = ''; this._insereSobrenome.value = ''; this._insereData.value = ''; this._insereCPF.value = ''; this._insereEmail.value = '';

this._insereNome.focus(); } }

MINHA CLASSE LISTARUSUARIOS QUE CORRESPONDE A CLASSE LISTA NEGOCIACOES

class ListarUsuarios {

constructor() {

this._usuarios = []; }

adiciona(usuario) {

this._usuarios.push(usuario); }

get usuarios() {

return [].concat(this._usuarios); }

esvazia() {

this._usuarios = []; } }

MINHA CLASSE USUARIOSERVICO QUE CORRESPONDE A CLASSE NEGOCIACOSSERVICE -- obs o erro que é apresentado é neste .map e o erro é "UsuarioServico.js:14 Uncaught TypeError: JSON.parse(...).map is not a function

at XMLHttpRequest.xhr.onreadystatechange (UsuarioServico.js:14)"

class UsuarioServico {

obterUsuario(cb) {

let xhr = new XMLHttpRequest(); xhr.open('GET', 'http://localhost:8080/core-web/rest/usuarios/10'); xhr.onreadystatechange = () => {

if(xhr.readyState == 4) {

if(xhr.status == 200) {

cb(null, JSON.parse(xhr.responseText) .map(objeto => new Usuario(objeto.nome, objeto.sobrenome, new Date(objeto.data), objeto.cpf, objeto.email)));

} else { console.log(xhr.responseText); cb('Não foi possível importar usuários', null); } } }; xhr.send(); } }

solução!

Sua API não retorna um array, por isso map não vai funcionar. É um problema de backend e não de front. Comparece o retorno da Api do curso com o seu retorno. Verá que a estrutura é diferente. Seu retorno não está dentro de [].

Muito obrigado Professor!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software