API Scraper paralympique

code a utilisé pour utilisé l'API

Tout d'abord, il faut un script qui emmet une requête vers l'api:

fetch('https://adrienr.promo-68.codeur.online/projet-gwendoline-api/scrapper/node')
      .then((res) => {
            /* console.log('ok') */
            res.json().then(j => displayJson(j))
})
.catch((res) => {
            console.log('erreur de requête')
            console.log(res)
})

function displayJson(json) {
      console.log(json)
      /* console.log(json[2][0]['titre']) */
      boucleJson(json)
}
      

Ensuite, il faut une fonction (ci dessus nommé boucleJson) qui vient inséré dans le DOM les entrées du tableau précédemment appelé:

const divApi = document.getElementById('api');

function boucleJson(json) {
      /* divApi.innerHTML = json[0][0]['titre']; */
      /* console.log(json.length); */
      for (let i = 0; i < json.length; i++) {
            for (let ii = 0; ii < json[i].length; ii++) {
                  let inApiDiv = divApi.innerHTML;
                  divApi.innerHTML = inApiDiv + '<a class="apiArt" href="' + json[i][ii]['lien'] + '"><section class="apiArt"><div class="child"><img src="' + json[i][ii]['thumbnail'] + '"></div><div class="child"><h4>' + json[i][ii]['titre'] + '</h4>' + json[i][ii]['date'] + '<hr><p>' + json[i][ii]['description'] + '</p></div></section></a>';
            }
      }
}
      

Enfin, une balise html pour que le code généré puisse y être inséré:

<div id="api"></div>
      

Optionnellement , vous pouvez rajoutez un peut de css :

/* CODE API */

section.apiArt{
      border: 1px solid red;
      display: flex;
      margin: 2rem 0;
}
#api a{
      text-decoration: none;
      color: black;
}
section.apiArt img{
      width: 15rem;
}
section.apiArt .child{
      position: relative;
}
section.apiArt .child:nth-child(2){
      padding: 0 2rem;
}
section.apiArt hr{
      width: 15rem;
      position: absolute;
}
      

notes des développeurs

vous pouvez bien sur modifier le css facilement, quand a la structure html, vous pouvez la modifier dans le script, dans la function boucleJson (divApi.innerHTML = inApiDiv + inséré le code html qui construit les cards).

notes des développeurs concernant l'installation de l'API

Configuration du server (problème http/https) : si vous ne pouvez pas accédé aux données pour installer l'API, que votre server apache est en https et que node est en http, vous pouvez configurer votre server en modifiant le fichier logs/apache

ProxyRequests On
ProxyPass "/projet-gwendoline-api/scrapper/node" "http://localhost:3000/"
ProxyPassReverse "/projet-gwendoline-api/scrapper/node" "http://localhost:3000/"
      

résultat attendu