Javascript De todos os APIs que testei, a do COVID 19 não funcionou

Air-Gear · 26 de setembro de 2021

Olá!

Eu preciso consumir uma API e apresentar o resultado em uma página HTML, onde vou criar um combo de seleção para receber os estados disponíveis para verificação da API e ao selecionar o estado preencher os campos de uma tabela com Casos Confirmados, Mortes, Recuperados e Vacinados.

Bom, eu testei com outros APIs para entender como funcionava o consumo e funcionou perfeitamente, mas justo o API do COVID 19 que não funciona. O dados que eu preciso estão no campo total. O API é esse: https://data.covid19india.org/v4/min/data.min.json

Alguém pode meu ajudar? Segue os códigos.

server.js

const cors = require('cors')
const { json } = require('express')
const express = require('express')
const app = express()
const axios = require('axios')

app.use(cors())

app.get('/', async(req, res) => {

    // response é a resposta do axios MAS eu tiro o data de dentro do response
    const { data } = await axios('https://data.covid19india.org/v4/min/data.min.json')
    return res.json(data)
})

app.listen('4567')

index.html

<html>
    <head>
        <title>Consumindo API</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    </head>

    <body>
        <main></main>
    </body>

    
    <script>

        async function getContent() {
            try {
                const response = await fetch('http://localhost:4567')
                //console.log(response)
                const data = await response.json()

                show(data)
            } catch (error) {
                console.log("ERROU!!!")
            }            
        }
        getContent()

        function show(users) {
            let output = ''
            
            output += `<table>`
            output += `<tr>`
            output += `<td>ID</td>`

            output += `</tr>`
            for (let user of users) { 
                output += `<tr>`             
                output += `<td>${user.total.confirmed}</td>`

                output += `</tr>`
            }

            output += `</table>`
            
            document.querySelector('main').innerHTML = output
        }
    </script>

</html>

GabrielSennaMs · 27 de setembro de 2021

@Air-Gear

O problema está no seu for na sua página, o for/of não funciona para objeto e a API do Co*** retorna um "object json" por isso não funciona.

Modificando o for/of para um for/in ele deve funciona, é claro que você vai ter que modificar o seu código para isso.

Fiz um exemplo de como eu usei aqui

<!DOCTYPE html>
<html>
    <head>
        <title>Consumindo API</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    </head>
    <body>
        <main></main>
        <script>
            window.onload = async () => await fetch('https://data.covid19india.org/v4/min/data.min.json')
                .then(async (res) => show(await res.json()))
                .catch((error) => console.error(error));


            function show(regions) {
                let 
                    table = document.createElement("table"),
                    thead = document.createElement("thead"),
                    tbody = document.createElement("tbody");

                thead.innerHTML = (`<tr><th>UF</th><th>Casos Confirmados</th></tr>`);
                table.appendChild(thead);

                for (let uf in regions) {
                    let tr = document.createElement("tr");

                    tr.innerHTML = (`<td>${uf}</td><td>${regions[uf].total.confirmed}</td>`);

                    tbody.appendChild(tr);
                }

                table.appendChild(tbody);
                document.querySelector('main').appendChild(table);
            }
        </script>
    </body>
</html>