0

estou treinando o consumo de uma API, porém meu JavaScript não está funcionando e nem está se comunicando com o HTML. Alguém sabe me dizer o que estou fazendo de errado?

Javascript:

function carregar_dados() {
    var casos = { brasil: 0, data: 0, }
    var lista = []
    var request = new XMLHttpRequest()
    request.open('GET', 'https://api.covid19api.com/summary', true)
    request.onload = function () {
        var data = JSON.parse(this.response)

        if (request.status >= 200 && request.status < 400) {
            for (var k in data["Countries"]) {
                if (data["Countries"][k].CountryCode == "BR") {
                    casos.brasil = data["Countries"][k].TotalConfirmed
                }

                document.getElementById('dados-brasil').textContent = casos.brasil.toLocaleString('pt-BR')
                carregar_lista(lista)
            }
        }
        request.send()
    }
}

function carregar_lista(lista) {
    lista.sort((a, b) => parseInt(b.TotalConfirmed) - parseInt(a.TotalConfirmed))
    var ul = document.getElementById('dados-ranking')
    lista.forEach(geraLista);

    function geraLista(element, index) {

        var li = document.createElement('li')
        li.setAttribute('class', 'list-group-item')
        ul.appendChild(li)
        li.innerHTML = li.innerHTML + parseInt(index + 1) + "º - " + element.Country + " : " + element.TotalConfirmed.toLocaleString('pt-BR')

    }
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="..\..\asset\styles.css">
    
    <title>Covid-19 Brasil</title>
      
</head>
<body class="body" onload="carregar_dados()"> 

    <div> 
        <a href="..\Home\Index.html">Home</a>
        <a href="Index.html">Casos no Brasil</a>
        <a href="..\Ranking\Index.html">Ranking Mundial</a>
        
    </div>
    <div>
        <h3>Brasil</h3>
        <div class="info">
            <div id= "dados-brasil">
                <p> xxxxxxxxxxxxx </p>
            </div>
        </div>
    
    </div>
    <script src="..\..\asset\api.js"></script>
</body>
</html>

1 Resposta 1

1

O problema está localizado na parte em que é enviado a requisição.

Você precisa colocar o request.send() fora da function onload, pois o onload só é executado após a chamada ser concluída.

Seu código ficará assim:

function carregar_dados() {
    var casos = { brasil: 0, data: 0, }
    var lista = []
    var request = new XMLHttpRequest()
    request.open('GET', 'https://api.covid19api.com/summary', true)
    request.onload = function () {
        var data = JSON.parse(this.response)

        if (request.status >= 200 && request.status < 400) {
            for (var k in data["Countries"]) {
                if (data["Countries"][k].CountryCode == "BR") {
                    casos.brasil = data["Countries"][k].TotalConfirmed
                }

                document.getElementById('dados-brasil').textContent = casos.brasil.toLocaleString('pt-BR')
                carregar_lista(lista)
            }
        }            
    }    

    request.send(); <-- aqui
}

Perceba que o request.send() está após a function onload.

1

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 .