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

Não consigo exibir um elemento de um array de objetos

Boa Tarde! Tenho uma lista de checkbox e deixei um botão no final do formulário para verificar quais itens foram selecionados. A função verificaCheck cria um array vazio. Logo em em seguida ela verifica quais funções estão checadas e faz uma requisição ajax em uma api que está no nodejs. Os objetos são adicionados no array, formando um array de objetos.

function verificaCheck() {
    let novosDados = [];
      if ($("#explosivos1").is(':checked')) {
        $.get("http://localhost/dados", function(data) {
          novosDados.push(data[0]);
        });
      }

      if ($("#explosivos2").is(':checked')) {
        $.get("http://localhost/dados", function(data) {
          novosDados.push(data[1]);
        });
      }

      if ($("#explosivos3").is(':checked')) {
        $.get("http://localhost/dados", function(data) {
          novosDados.push(data[2]);
        });
      }
console.log(novosDados);
console.log(novosDados[2]);
  }
click no botão verificar
  $("#verificar").click(function () {
  verificaCheck();
  });

O problema é quando eu tento acessar alguma informação especifica do array. Quando eu dou um: console.log(novosDados); Aparece o array certinho. Mas quando acesso pelo console.log(novosDados[2]); Aparece undefined. Entendi que ele está acessando o array vazio e não o novo array com as informações. Espero que tenha ficado claro, obrigado dedes já !

4 respostas

Boa tarde, Lucas! Como vai?

Se quando vc faz console.log(novosDados[2]) o retorno é undefined, ao que tudo indica é que nessa posição não há informação nenhuma!

Cole aqui, por favor, o que é exibido quando vc faz console.log(novosDados) para que eu possa dar uma olhada.

Boa Noite Gabriel! Acho que entendi o problema, mas ainda não consegui resolver. Basicamente o problema é que uma requisição http é assíncrona, ai quando eu clico na primeira vez no botão #verificar ele não carrega os danos no array, mas quando eu clico pela segunda vez ele carrega. Preciso que carregue na primeira vez.... Tentei usar o método .done() mas acho que não estou usando ele corretamente :

function verificaCheck() {

      if ($("#explosivos1").is(':checked')) {
        $.getJSON('http://localhost/dados')
        .done(function (data) {
          novosDados.push(data[0]);
        });
      }

      if ($("#explosivos2").is(':checked')) {
        $.getJSON('http://localhost/dados')
        .done(function (data) {
          novosDados.push(data[1]);
        });
      }

      if ($("#explosivos3").is(':checked')) {
        $.getJSON('http://localhost/dados')
        .done(function(data){
          novosDados.push(data[2]);

        });
      }
    }

Como posso usar esse método corretamente? Obrigado pela atenção

solução!

Cheguei em uma solução! Na verdade o erro estava na requisição do ajax mesmo. Eu precisava carregar os dados antes de fazer as condições. Segue o código atualizado:

$("#verificar").click(function() {
  var request = new XMLHttpRequest();
  request.open('GET', 'http://localhost/dados');
  request.onload = function() {
    var novosDados = JSON.parse(request.responseText);
    verificaCheck(novosDados);

  };
  request.send();
});

var arrayFinal = [];
function verificaCheck(data) {
      if ($("#explosivos1").is(':checked')) {
          arrayFinal.push(data[0]);

        };


      if ($("#explosivos2").is(':checked')) {
          arrayFinal.push(data[1]);
        };


      if ($("#explosivos3").is(':checked')) {
        arrayFinal.push(data[2]);

        };
        console.log(arrayFinal);
      }

Mto bem, Lucas! Operações assíncronas realmente é um tema que sempre gera dúvidas!

Sempre que tiver qualquer pergunta é só mandar aqui no fórum!

Grande abraço e bons estudos, meu aluno!