Search code examples
javascriptfetch

Use fetch to receive data from an api

I am trying to use fetch to get information from an api, the information that the api generates is the following:

{"header":{"Request":"Competitions","Timestamp":1624315470},"data":[{"CompCode":"CAEC21","Name":"CAMPEONATO DE ANDALUCIA POR EQUIPOS DE CLUBES","ShortName":"CAMPEONATO DE ANDALUCIA POR EQUIPOS DE CLUBES","Place":"Almer\u00eda","DateFrom":"2021-06-13","DateTo":"2021-06-13"},{"CompCode":"CAAL21","Name":"Campeonatos de Andaluc\u00eda de Aire Libre 2021","ShortName":"Campeonatos de Andaluc\u00eda de Aire Libre 2021","Place":"Huelva","DateFrom":"2021-06-05","DateTo":"2021-06-06"},{"CompCode":"CPAL21","Name":"Campeonato Provincial de Aire Libre Huelva - Absoluto","ShortName":"Campeonato Provincia de Aire Libre Huelva - Absoluto","Place":"Huelva","DateFrom":"2021-05-29","DateTo":"2021-05-30"},{"CompCode":"CPALM21","Name":"Campeonato Provincial de Aire Libre Huelva - Menores","ShortName":"Campeonato Provincial de Aire Libre Huelva - Menores","Place":"Huelva","DateFrom":"2021-05-29","DateTo":"2021-05-29"},{"CompCode":"CAS21","Name":"Campeonato de Andaluc\u00eda en Sala 2021","ShortName":"Campeonato de Andaluc\u00eda en Sala 2021","Place":"Isla Cristina (Huelva)","DateFrom":"2021-01-09","DateTo":"2021-01-10"},{"CompCode":"ent","Name":"Entrenamiento","ShortName":"Entrenamiento","Place":"Huelva","DateFrom":"2021-01-01","DateTo":"2021-12-31"},{"CompCode":"CPSH21","Name":"Campeonato Provincial Sala 2020","ShortName":"Campeonato Provincial Sala 2020","Place":"San Juan (Huelva)","DateFrom":"2020-12-18","DateTo":"2020-12-20"},{"CompCode":"TSM20","Name":"Trofeo Solo Mujeres 2020","ShortName":"Trofeo Solo Mujeres 2020","Place":"Huelva","DateFrom":"2020-10-18","DateTo":"2020-10-18"}]}

And I use the following code to try to display the data but it doesn't work for me:

<body>

<div class="container mt-4 shadow-lg p3 mb-5 bg-body rounded">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>CODE</th>
                <th>NAME</th>
                <th>PLACE</th>
            </tr>
        </thead>
        <tbody id="data">
        </tbody>

    </table>

</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

<script>
    let url = 'http://localhost/api/json/Competitions.php';

    fetch(url,{
        method: "POST",
        body: data
    })
        .then(response => response.json())
        .then(data => mostrarData(data))
        .catch(error => console.log(error))
        
    const mostrarData = (data) => {
        console.log(data)
        let body = ''
        for (let i = 0; i<data.length; i++){
            body += `<tr><td>${data[i].CompCode}</td><td>${data[i].Name}</td><td>${data[i].Place}</td></tr>`                
        }
        document.getElementById('data').innerHTML = body
    }            
</script>

No error is displayed on the console

Solution

  • data an object containing the array named data, so to access that array you use data.data.

    .then(data => mostrarData(data.data))