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.
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.
data.values[i].name
no for deveria serdata.values.length