1

Pessoa, preciso de ajuda com uma chamada de uma API, que retorna um JSON.

Já tentei diversas coisas, mas não consigo fazer com que retorne no meu HTML as informações.

Alguém consegue me apoiar com algum código? Não coloquei aqui o que usei pois utilizei vários.

inserir a descrição da imagem aqui

Só preciso pegar o name e o description. Já usei o name direto, usei values.name, mas nada funcionou.

Um exemplo do meu javascript

var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");

btn.addEventListener("click", function() {
  var ourRequest = new XMLHttpRequest();
  ourRequest.open('GET', '');
  ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
      var ourData = JSON.parse(ourRequest.responseText);
      renderHTML(ourData);
    } else {
      console.log("We connected to the server, but it returned an error.");
    }    
  };
  ourRequest.onerror = function() {
    console.log("Connection error");
  };
  ourRequest.send();
  pageCounter++;
  if (pageCounter > 10) {
    btn.classList.add("hide-me");
  }
});
function renderHTML(data) {
  var htmlString = "";

  for (i = 0; i < data.length; i++) {
    htmlString += "<p>" + data.values[i].name + data.values[i].description;

    htmlString += '.</p>';

  }

  animalContainer.insertAdjacentHTML('beforeend', htmlString);
}
<header>
    <h1>JSON and AJAX</h1>
    <button id="btn">Fetch Info for 3 New Animals</button>
  </header>
  
  <div id="animal-info"></div>

  <script src="js/main.js"></script>

Obrigado.

1
  • 2
    se está usando data.values[i].name no for deveria ser data.values.length Commented 25/01/2021 às 0:05

2 Respostas 2

1

Como mencionado pelo @RicardoPontual no comentário, o problema muito provavelmente se encontra no seguinte bloco de código:

for (i = 0; i < data.length; i++) {
    htmlString += "<p>" + data.values[i].name + data.values[i].description;

    htmlString += '.</p>';

  }

Você está verificando data.length. Se instanciar um objeto e tentar encontrar uma propriedade length dele (a não ser que tenha sido explicitamente declarada) retornará undefined. Nesse caso, seu laço de repetição não chega a executar.

Sendo isso mesmo, o que corrige o problema:

for (let i = 0; i < data.values.length; i++) {
    htmlString += "<p>" + data.values[i].name + data.values[i].description;

    htmlString += '.</p>';

}

Verifique a propriedade length (tamanho) da propriedade values e não do objeto data que é seu JSON convertido a partir do JSON.parse. O length da propriedade values retornará o tamanho da lista.

Espero ter ajudado de alguma forma.

2
  • Ruan, obrigado. Era exatamente isso que vocês citaram. O meu problema agora é conseguir jogar a informação para uma tabela. Está aparecendo tudo na mesma linha. Commented 25/01/2021 às 2:00
  • Estou tendo retorno de undefined no campo description Commented 25/01/2021 às 2:33
0

Estou tendo retorno de undefined no campo description

inserir a descrição da imagem aqui

Mudei o .js. Não estava conseguindo evoluir com aquele.

$(document).ready(function() {
  $("#button-buscar-licencas-ambiente").click(function(){
    var urlapi = '';
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", urlapi, false);
    xhttp.send();
    var obj = JSON.parse(xhttp.responseText);
    var data_map = new Map();
    var index = 0;
      var objLength = obj.values.length;
      for (var i = 0; i < objLength; i++) {
            data_map.set(obj.values[i].name, data_map.get(obj.values[i].name) + obj.values[i].description);
        }
    const objConverted = Object.fromEntries(data_map);      
    var myJSON = JSON.stringify(objConverted); 
    data_map.forEach(montaTabelaLicencas);
    event.preventDefault();  
  });
});



function montaTabelaLicencas(licencasConsumidas, hostGroup) {

  var newRow = $('<tr class="linha-table">');
      var cols = "";

        cols += '<td class="hostgroup" id="hostgroup">' + hostGroup + '</td>';
        cols += '<td class="quantidade" id="quantidade">' + licencasConsumidas + '</td>';

      newRow.append(cols);

       $("#table-licencas").append(newRow); 
        
}; 

2
  • 1
    Tente não colocar outras perguntas como resposta de uma pergunta anterior, creio que seja melhor fazer outra. Dito isso, acredito que o problema esteja no for, dado que está chamando o get do seu Map com a chave do valor que está configurando durante a chamada do set. Como ele ainda não existe, retorna undefined. Sendo esse o caso, o correto seria dentro do for: data_map.set(obj.values[i].name, obj.values[i].name + obj.values[i].description);. Commented 25/01/2021 às 3:55
  • Obrigado Ruan!! Commented 25/01/2021 às 12:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .