11487 sujets

JavaScript, DOM et API Web HTML5

Récupérer le prochain passage sur l'API Irigo (réseau bus-tram Ange

Bonjour,
j'aimerais afficher sur mon site l'horaire du prochain passage d'un bus a un arret, mais il ne m'affiche pas celui qui arrive mais le dernier passage de la journée.
Javascript:

var callBackGetSuccess = function(data) {
    console.log("données api", data)
    var element = document.getElementById("text1");
        element.innerHTML = "En direction de " + data.records[0].fields.dest;
    var element = document.getElementById("text2");
        element.innerHTML = "A l'arret " + data.records[0].fields.nomarret;
    var element = document.getElementById("text3");
        element.innerHTML = "Ligne  " + data.records[0].fields.mnemoligne + " " + data.records[0].fields.nomligne;
    data.records.forEach((record) => {
        if(Date.parse(record.fields.depart)> Date.now()){
            var element = document.getElementById("bus2tr8mai");
            element.innerHTML = "Prochain passage le " + record.fields.depart;
        }else{
            var element = document.getElementById("bus2tr8mai");
            element.innerHTML = "Il n'y a plus de bus aujourd'hui!";
        }
    });
}

function buttonClickGET() {
    var url = "https://data.angers.fr/api/records/1.0/search/?dataset=bus-tram-circulation-passages&q=&lang=fr&rows=1000&sort=-depart&facet=mnemoligne&facet=nomligne&facet=dest&facet=mnemoarret&facet=nomarret&facet=numarret&refine.mnemoligne=02&refine.nomligne=ST+SYLVAIN+BANCHAIS+%3C%3ETRELAZE&refine.dest=TRELAZE+QUANTINIERE&refine.nomarret=8+MAI+TRELAZE&refine.numarret=20239&timezone=Europe%2FParis"

    $.get(url, callBackGetSuccess).done(function() {
        //alert( "seconde seccess" );
    })
    .fail(function() {
        alert( "error" );
    })
    .always(function() {
        //alert( "finished" )
    });
}

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Irigo - Passages</title>
        <script src="api.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <p></p>
            <input type="button" value="APPEL API IRIGO" onclick="buttonClickGET()"><p></p>
            <p id="text1"></p>
            <p id="text2"></p>
            <p id="text3"></p>
            <p id="bus2tr8mai"></p>
            
        </div>

    </body>
</html>

lien api: https://data.angers.fr/api/records/1.0/search/?dataset=bus-tram-circulation-passages&q=&lang=fr&rows=1000&sort=-depart&facet=mnemoligne&facet=nomligne&facet=dest&facet=mnemoarret&facet=nomarret&facet=numarret&refine.mnemoligne=02&refine.nomligne=ST+SYLVAIN+BANCHAIS+%3C%3ETRELAZE&refine.dest=TRELAZE+QUANTINIERE&refine.nomarret=8+MAI+TRELAZE&refine.numarret=20239&timezone=Europe%2FParis
Aidez-moi s'il vous plaît!
Modifié par AleodCR (23 Jun 2020 - 14:15)
Bonjour,

Pour avoir le prochain départ c'est la première date de départ qui est supérieure à la date actuelle qu'il faut garder ici
Date.parse(record.fields.depart)> Date.now()

Donc dès que c'est supérieur tu fais le innerHTML et tu sors !!
Le pb c'est que tu ne sors pas donc tu vas jusqu'à la dernière.
Le pb c'est que tu ne peux pas interrompre une forEach.

Il te faut faire le parcours avec une boucle for et faire break dès que t'as trouvé.

Si j'ai bien compris parce que je ne suis pas sûr de mon interprétation du code.
Meilleure solution
Dev-Web-06 a écrit :
Bonjour,

Pour avoir le prochain départ c'est la première date de départ qui est supérieure à la date actuelle qu'il faut garder ici
Date.parse(record.fields.depart)&gt; Date.now()

Donc dès que c'est supérieur tu fais le innerHTML et tu sors !!
Le pb c'est que tu ne sors pas donc tu vas jusqu'à la dernière.
Le pb c'est que tu ne peux pas interrompre une forEach.

Il te faut faire le parcours avec une boucle for et faire break dès que t'as trouvé.

Si j'ai bien compris parce que je ne suis pas sûr de mon interprétation du code.

Merci beaucoup, il n'y as plus de problème!
Sujet clos
Aller à