Use fetch to receive data from an api

Question

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

Musa · Accepted Answer · 2021-06-21 23:39:25Z

2

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

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

answered Jun 21, 2021 at 23:39

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jomar Tinga · Accepted Answer · 2021-06-21 23:38:04Z

0

Please change your method from POST to GET cause you fetching from the backend.

    const options = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },
        credentials: 'include'
    }

    fetch('URL', options)
    .then(response => response.json())
    .then(result => console.log(result))
    .catch(err => console.log(err))

answered Jun 21, 2021 at 23:38

Jomar Tinga

556 bronze badges

2 Comments

evolutionxbox Over a year ago

What if the endpoint is expecting a POST? The method being used in the question is likely not the culprit.

Club Asirio Huelva Over a year ago

I have changed it and it still does not work

Collectives™ on Stack Overflow

Use fetch to receive data from an api

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related