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>