Affichage de données sur une page web à partir d'une API

invite7b3ac5a5 · 06/02/2021, 20h38

Bonsoir tout le monde,

Je sollicite votre aide car j'ai des difficultés à finaliser un projet dans le cadre de mes études en école de commerce. En effet, je dois réaliser à partir de la plateforme Glitch une page web qui affiche la destination et le temps d'attente des métros de la gare de Lyon à partir de l'API suivante : https://api-ratp.pierre-grimaud.fr/v...gare-de-lyon/R.

Voilà pour le moment ce que j'ai codé :

- Pour la partie HTML :

Code HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Assignment 2</title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
    />

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="main.js"></script>
    <h1>
      Metros' destinations and waiting times
    </h1>

    <div class="row">
      <p id="destination" class="six columns">
        Destination
      </p>
      <p id="message" class="six columns">
        Waiting time
      </p>
    </div>
    <div id="schedules" class="container"></div>
    <p>
      Data can be found here :
      <a
        href="https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/1/gare-de-lyon/R" target="_blank"
      >
        Datalink</a
      >
    </p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

- Pour la partie JS :

Code:

$.getJSON(
  "https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/1/gare-de-lyon/R",
  function(json) {
    console.log(json.features[0].destination.message);
    var schedules = json.features;

    for (var i = 0; i < schedules.length; i = i + 1) {
      var schedules = schedules[i];
      var html=
  '<div class="row"><div class ="six columns"><p>' +
          schedules.properties.destination +
          '</p></div><div class ="six columns"><p>' +
          schedules.properties.message +
          "</p></div></div>"
      $("#schedules").append(html)
      
      ;
    }
  }
);

Le problème, c'est que ni la destination ni le temps d'attente ne s'affichent... Je ne sais pas quoi faire, j'ai commencé à toucher au HTML et au CSS au début de la semaine et je suis sur JS depuis seulement deux jours... Par ailleurs, dites-moi ce que vous en pensez mais je trouve que le rythme d'apprentissage est très intensif et exigeant pour quelqu'un dont la vocation n'est pas de faire de la programmation ou du codage web.

Merci d'avance pour votre aide tant technique que morale !

Merlin95 · 06/02/2021, 23h13

Boici le format des données en entrée les données sont dans "result" et non "features". Je ne sais pas si c'est la raison du problème mais c'est déjà une incohérence.

Code:

{
    "result": {
        "schedules": [
            {
                "message": "0 mn",
                "destination": "Chateau de Vincennes"
            },
            {
                "message": "10 mn",
                "destination": "Chateau de Vincennes"
            },
            {
                "message": "20 mn",
                "destination": "Chateau de Vincennes"
            },
            {
                "message": "31 mn",
                "destination": "Chateau de Vincennes"
            }
        ]
    },
    "_metadata": {
        "call": "GET /schedules/metros/1/gare-de-lyon/R",
        "date": "2021-02-06T23:05:04+01:00",
        "version": 4
    }
}

Sinon log par exemple "Json appelé" et regarde s'il s'affiche. Sinon tu peux aussi utiliser le debugger Javascript et mettre un point d'arrêt dans ta fonction.

invite7b3ac5a5 · 07/02/2021, 08h17

J'ai essayé de remplacer "features" par "result" mais ça ne fonctionne toujours pas... Est-ce que vous pourriez essayer de faire fonctionner mon code à partir de ce que j'ai donné, de me le partager et de m'expliquer ce qu'il y avait de faux dedans ? Je suis vraiment pas calé en programmation et je dois rendre ce travail pour ce soir...

**pm42** · 07/02/2021, 09h32

Envoyé par Atchmou

J'ai essayé de remplacer "features" par "result"

Je ne sais pas quel code tu as écrit. Mais var schedules = json.result.schedules devrait marcher.

A voir en vidéo sur Futura · Aujourd'hui

**vgondr98** · 07/02/2021, 11h14

Il faut aussi remplacer schedules.properties.destinati on par schedules.destination et schedules.properties.message par schedules.message car la propriété properties n'existe pas dans le json.

Tu dois aussi commenter la ligne console.log(json.features[0].destination.message); car elle entraine une erreur et donc le reste des lignes n'est pas exécuté.
Tu aurais du écrire console.log(json.result.schedu les[0]);

Est-ce que tu utilises la console de développeur de ton navigateur (F12) ?

var schedules = schedules[i]; //C'est pas bon du tout d'écrire cela. Je te laisse deviner pourquoi.

invite7b3ac5a5 · 07/02/2021, 11h15

Merci pour votre aide ! Finalement j'ai codé la page web à nouveau en partant de zéro et ça a fini par marcher. Voilà le lien si ça vous intéresse pour voir le nouveau code : https://assignment-2-final.glitch.me/

**vgondr98** · 07/02/2021, 12h06

Désolé mais ton code ne marche pas, tu as quatre éléments dans ton json et il n'y a qu'en seul élément qui s'affiche.
Pourquoi à ton avis ?

Cliquez pour afficher

invite7b3ac5a5 · 07/02/2021, 13h42

Merci mais c'est fait exprès. Finalement on n'exigeait de moi que d'extraire deux informations pour un train, j'avais pas besoin de le faire pour tous les trains ^^ Mais je vais quand même regarder par curiosité ce que tu m'as envoyé

**vgondr98** · 07/02/2021, 14h48

Pourquoi fait tu une boucle dans ce cas ?

Ton code sera plus claire si tu écris directement :

var html= '<div class="row"><div class ="six columns"><p>' + schedules[0].destination + '</p></div><div class ="six columns"><p>' + schedules[0].message + "</p></div></div>";

$("#schedules").append(html) ;

invite7b3ac5a5 · 07/02/2021, 15h09

Mais c'est ce que j'ai fait en fin de compte, regarde le code source de la page finale

Merlin95 · 07/02/2021, 16h45

C'est pas "schedules" mais "result", voir message #2

Affichage de données sur une page web à partir d'une API

Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Re : Affichage de données sur une page web à partir d'une API

Discussions similaires

Extraire des données à partir d'une page divisée en trois frames ?

Pb affichage ééments de page web

Problème d'affichage sur une page web

affichage page securisée