Javascript is not relating in HTML

Asked

Viewed 45 times

0

I am training the consumption of an API, but my Javascript is not working and is not communicating with HTML. Can anyone tell me what I’m doing wrong?

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>
javascript html api

1 answer

1


The problem is located in the part where the request is sent.

You need to put the request.send() out of Function onload, for the onload is only executed after the call is completed.

Your code will look like this:

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
}

Note that request.send() is after Function onload.

Browser other questions tagged javascript html api

You are not signed in. Login or sign up in order to post.