2
respostas

Validar se os dados buscados via XMLHttpRequest já estão na página

Seguinte....entendi bem o conceito da aula 9, atividade 5, mas me bateu uma dúvida cruel.....toda vez que eu clico no botão buscar pacientes o js busca o conteudo da URL, sempre vai criar os componentes na table com os mesmos dados, gerando assim massa desnecessária.....existe alguma forma de se validar os dados quando o botão for clicado se os dados que já foram buscados estão na tabela??? se o js so inserisse o que for novo e ignorar os dados já existentes?

2 respostas

Olá Douglas,

Não assisti essa aula, mas fica aqui um exemplo de como poderia ser feito. Existem outras maneiras também, você pode criar objetos e arrays para guardar essas informações e ter elas disponíveis no Javascript também.

Para os exemplos eu usei o seguinte HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Exemplo Alura</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <section class="container">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Nome</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="table--username"></td>
        </tr>
      </tbody>
    </table>
    <button class="btn btn-default load--userdata">Clique para carregar os dados</button>
  </section>

  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Aqui é uma maneira fazendo a checagem no DOM.

var $table = $('.table'),
    $username = $('.table--username');

// função que retorna os dados via ajax (mockada para exemplo apenas)
var _returnUserData = function() {
  return {
    username: 'Douglas Oliveira Luciano'
  }
};

// bind do evento de clique no botão
$('.load--userdata').on('click', function() {
  // verifica se a div username está vazia
  if ( $username.is(':empty') ) {
    $username.text( _returnUserData().username );
  }
  else {
    alert('Dados ja foram carregados.');
  }
});

E aqui fazendo a checagem em uma variável que fica na memória

var $table = $('.table'),
    $username = $('.table--username');


var _userdata = {
  username: ''
};

var _returnUserData = function() {
  return {
    username: 'Douglas Oliveira Luciano'
  }
};

$('.load--userdata').on('click', function() {
  if ( ! _userdata.username ) {
    var _username = _returnUserData().username;
    $username.text( _username );
    _userdata.username = _username;
  }
  else {
    alert('Dados ja foram carregados.');
  }
});

Att.

Olá Wagner!

Primeiro eu gostaria de agradecer a resposta, creio que vc esteja usando o jquery (esse código me soa bastante isso), eu guardei ele no meu pc e quando eu for assistir essas aulas vou analisar melhor seu codigo, mas entendi a logica dele!

valewwwwwww