Não estou conseguindo atualizar meu objeto no JavaScript

0 respostas
javascript
Dayson_Rodrigues

Estou tentando atualizar o meu objeto, e ao recuperar ele, está duplicando o meu objeto da tabela.

document.getElementById('formulario').addEventListener('submit',cadastrarContato);

function cadastrarContato(e){

	e.preventDefault();

	var nome = document.querySelector('#campo-nome').value;
	
	var dataNascimento =document.querySelector('#campo-dataNascimento').value;
	var email =document.querySelector('#campo-email').value;
	var endereco =document.querySelector('#campo-endereco').value;
	var celular =document.querySelector('#campo-celular').value;


	if(!nome || !dataNascimento || !email || !celular){
		alert('Existem algum campo não preenchido, favor verificar!');
		return false;
	}

	var contato = {
		"nome" : nome,
		"data" : dataNascimento,
		"email" : email,
		"endereco" : endereco,
		"celular" : celular
	}

	if(localStorage.getItem('contato') == null){
		var contatos = [];
		contatos.push(contato);
		localStorage.setItem('contato',JSON.stringify(contatos)); //transforma o objeto JS para formado JSON.
	}else {
		var contatos = JSON.parse(localStorage.getItem('contato'));
		contatos.push(contato);
		localStorage.setItem('contato',JSON.stringify(contatos));
	}

	console.log(contato);

	document.getElementById('formulario').reset();

	mostraContatos();
}

function mostraContatos(){

	var contatos = JSON.parse(localStorage.getItem('contato'));	

	var contatoResultado = document.querySelector("#resultados");

	contatoResultado.innerHTML='';
	
	for(var i = 0; i < contatos.length; i++){
		var nome = contatos[i].nome;
		var dataNascimento = contatos[i].data;
		var email = contatos[i].email;
		var endereco = contatos[i].endereco;
		var celular = contatos[i].celular;

		contatoResultado.innerHTML +='<tr>'+
		'<td>'+ nome + '</td>'+
		'<td>'+ dataNascimento + '</td>'+
		'<td>'+ email + '</td>'+
		'<td>'+ endereco + '</td>'+
		'<td>'+ celular + '</td>'+
		'<td> <button class="btn-excluir" onclick="excluirContato(\''+nome+'\')"> Excluir </button> </td>'+
		'<td> <button class="btn-editar" onclick="atualizarContato(\''+nome+'\')"> Editar </button> </td>'+
		'</tr>'
	}
}

function excluirContato(nome){

	var contatos = JSON.parse(localStorage.getItem('contato'));

	for(var i = 0; i < contatos.length; i++){
		if(contatos[i].nome == nome){
			if(confirm(nome+' será excluído ?')){
				contatos.splice(i, 1);
			}
		}
		localStorage.setItem('contato',JSON.stringify(contatos));
	}
	mostraContatos();
}

function atualizarContato(nome){

	if(confirm('Deseja alterar o ' +nome)){

		var contatos = JSON.parse(localStorage.getItem('contato'));

		var contatoEncontrado;

		for(var i =0; i < contatos.length; i++){
			if(contatos[i].nome == nome){
				contatoEncontrado = contatos[i];
			}
		}

		document.querySelector('#campo-nome').value = contatoEncontrado.nome;
		document.querySelector('#campo-dataNascimento').value = contatoEncontrado.data;
		document.querySelector('#campo-email').value = contatoEncontrado.email;
		document.querySelector('#campo-endereco').value = contatoEncontrado.endereco;
		document.querySelector('#campo-celular').value = contatoEncontrado.celular;
	}
	contatos.push(contatoEncontrado);
	localStorage.setItem('contato', JSON.stringify(contatos));
	mostraContatos();
}
Criado 24 de agosto de 2017
Respostas 0
Participantes 1