Tester une API

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention -
team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention - 1 mai 2017 à 23:32

Bonjour, je viens de découvrir les API je ne connaissais pas et je trouve ça très intérressant j'ai tester un peux mais sans succès j'ai essayer ça ça n'a rien donné juse le fichier html qui fonctionne

Voici le fichier cours.js

// Accès à la météo de Lyon avec la clé d'accès 50a65432f17cf542
ajaxGet("http://api.wunderground.com/api/50a65432f17cf542/conditions/q/France/Lyon.json", function (reponse) {
    var meteo = JSON.parse(reponse);
    // Récupération de certains résultats
    var temperature = meteo.current_observation.temp_c;
    var humidite = meteo.current_observation.relative_humidity;
    var imageUrl = meteo.current_observation.icon_url;
    // Affichage des résultats
    var conditionsElt = document.createElement("div");
    conditionsElt.textContent = "Il fait actuellement " + temperature +
        "°C et l'humidité est de " + humidite;
    var imageElt = document.createElement("img");
    imageElt.src = imageUrl;
    var meteoElt = document.getElementById("meteo");
    meteoElt.appendChild(conditionsElt);
    meteoElt.appendChild(imageElt);
});

Et le fichier cours.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="../js/cours.js"></script>
</body>

</html>

J'ai suivis un peut ce tuto
https://openclassrooms.com/fr/courses/3306901-creez-des-pages-web-interactives-avec-javascript/3722361-utilisez-des-api-web

Merci d'avance :D

A voir également:

Tester une API
Flash drive tester - Télécharger - Divers Utilitaires
Tester son pc - Guide
Tester composant pc - Guide
Tester disque dur - Télécharger - Informations & Diagnostic
Tester compatibilité windows 11 - Guide

11 réponses

Réponse 1 / 11

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Si tu avais fait un copier/coller du tuto.. tu n'aurais pas oublié une ligne visiblement :-)

<script src="../js/ajax.js"></script>

Bien entendu.. tu as récupéré le fichier ajax.js que tu as mis dans le répertoire de ton site .... comme indiqué ici :

Copiez le fichierajax.jsissu du chapitre précédent dans le répertoire

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Le contenu du fichier ajax.js

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Tout d'abord merci pour votre réponse, alors j'ai donc trois fichier dans le même dossier que j'ai mis sur le bureau qui ce nomme "tes"
j'ai donc "cours.html"

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="../js/ajax.js"></script>
    <script src="../js/cours.js"></script>
</body>

</html>

Ensuite j'ai "cours.js"

var premMinElt = document.getElementById("premMin");
// Accès aux informations publiques sur le Premier Ministre
ajaxGet("https://www.data.gouv.fr/api/1/organizations/premier-ministre/", function (reponse) {
    var premierMinistre = JSON.parse(reponse);
    // Ajout de la description et du logo dans la page web
    var descriptionElt = document.createElement("p");
    descriptionElt.textContent = premierMinistre.description;
    var logoElt = document.createElement("img");
    logoElt.src = premierMinistre.logo;
    premMinElt.appendChild(descriptionElt);
    premMinElt.appendChild(logoElt);
});

et j'ai "ajax.js"

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tu dis :

alors j'ai donc trois fichier dans le même dossier

.... mais .. les fichiers js ... tu les as mis dans un sous-répertoire "js" comme indiqué dans le code que tu utilises ???

<script src="../js/ajax.js"></script>
 <script src="../js/cours.js"></script>

Ou alors tu modifies le code pour retirer le dossier js .. à toi de voir !

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Ah je ne savais pas ca je n'ai pas créer de sous répertoire js mais je préfère modifier mon code. J'ai créer un dossier sur mon bureau s'appelant test et dans ce dossier ce trouve les trois fichiers. Que dois-je mettre dans le code du coup ?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention

Ben tout simplement la même chose .. mais sans le ../js
C'est la base à connaitre ... les chemins relatifs !

<script src="ajax.js"></script>
 <script src="cours.js"></script>

Réponse 2 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

J'ai fais les modifications et ça ne fonctionne toujours pas... ça me donne comme avant c'est à dire ça :

Voici le code index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <<script src="../js/ajax.js"></script>
 <script src="../js/cours.js"></script>
</body>

</html>

Le code cours.js

var premMinElt = document.getElementById("premMin");
// Accès aux informations publiques sur le Premier Ministre
ajaxGet("https://www.data.gouv.fr/api/1/organizations/premier-ministre/", function (reponse) {
    var premierMinistre = JSON.parse(reponse);
    // Ajout de la description et du logo dans la page web
    var descriptionElt = document.createElement("p");
    descriptionElt.textContent = premierMinistre.description;
    var logoElt = document.createElement("img");
    logoElt.src = premierMinistre.logo;
    premMinElt.appendChild(descriptionElt);
    premMinElt.appendChild(logoElt);
});

Et ajax.js

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Relis ton code... tu as laisse les memes chemins...

Réponse 3 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Ah oui j'ai oubliée ma cervelle aujourd'hui ça fonctionne merci mais par exemple la sncf publie des API aussi j'aurais voulu essayer mais impossible donc je récupère le code grâce à post man je récupère le code de ce lien "https://api.sncf.com/v1". Ensuite je crée un dossier qui ce trouve sur le bureau je le nomme test2 dans ce dossier je crée un fichier HTML ce nommant test.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="teste.js"></script>

</html>

Et ça ne fonctionne pas :(

Veuillez indiquer présicément votre problème, nous faisons de notre mieux pour y répondre. Je répond à vos question de 19h à 23h la semaine :)

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Que contient ton fichier teste.js ?

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Alors voici les fichiers

index.html (qui était avant test.html)

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="cours.js"></script>

</html>

Et voici cours.js (qui était avant teste.js)

{
  "links": [
    {
      "title": "Coverage of navitia",
      "href": "https://api.sncf.com/v1/coverage/",
      "type": "coverage",
      "rel": "coverage",
      "templated": false
    },
    {
      "title": "Inverted geocoding for a given coordinate",
      "href": "https://api.sncf.com/v1/coord/0.0%3B0.0/",
      "type": "coord",
      "rel": "coord",
      "templated": true
    },
    {
      "title": "Compute journeys",
      "href": "https://api.sncf.com/v1/journeys",
      "type": "journeys",
      "rel": "journeys",
      "templated": false
    },
    {
      "title": "Autocomplete api",
      "href": "https://api.sncf.com/v1/places",
      "type": "places",
      "rel": "places",
      "templated": false
    }
  ]
}

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention

le problème c'est que tu as remplacé du code ... par un objet json....
Normal que ça ne marche pas.
Il faut que tu remettes l'ancien fichier cours.js et que dedans .. tu changes juste l'url pour taper sur l'API (https://api.sncf.com/v1

par exemple :

//url de l'api ciblée
var url_de_api = "https://api.sncf.com/v1";

// Accès aux informations publiques sur le Premier Ministre
var premMinElt = document.getElementById("premMin");

ajaxGet(url_de_api, function (reponse) {
    var repJson = JSON.parse(reponse);

    // Ici .. tu peux mettre le code de traitement que tu veux pour cette reponse...
    // par exemple : affiche dans la CONSOLE du navigateur la réponse   
     console.log(repJson);
  
});

Réponse 4 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Alors j'ai copiè ce que vous m'avais donner je l'ai placer dans "cours.js" (pour essayer bien-sûr)

cours.js

//url de l'api ciblée
var url_de_api = "https://api.sncf.com/v1";

// Accès aux informations publiques sur le Premier Ministre
var premMinElt = document.getElementById("premMin");

ajaxGet(url_de_api, function (reponse) {
    var repJson = JSON.parse(reponse);

    // Ici .. tu peux mettre le code de traitement que tu veux pour cette reponse...
    // par exemple : affiche dans la CONSOLE du navigateur la réponse   
     console.log(repJson);
  
});

index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="cours.js"></script>
</html>

Et ça ne fonctionne pas...

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Comment tu sais que çà ne marche pas ?
Que t'affiche la console de ton navigateur ??

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

La console me dit ça :

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tu as bien inclus le fichier ajax.js ???

Réponse 6 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Ah non je ne savais pas mais le "ajax.js" je le laisse tel quels ?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

..ben oui.
Sais tu ce qu'est une FONCTION ?

Dans ton fichier tu fais appel à une fonction ... la fonction ajaxGet .
Cette fonction est écrite dans le fichier ajax.js .. sans ça .. normal que ça ne marche pas !

Enfin bon.... sachant que ce fichier était présent dans ton premier exemple ... je ne comprend pas par quelle mystère tu as décidé de le retirer ....... (en pensant que ça ne changerait rien... Oo )

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

J'ai remis le fichier ajax.js dans le dossier et j'ai indiqué au fichier HTML que ajax.js était present mais ça ne fonctionne pas...

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention

Et qu'est-ce qui s'affiche dans la console ?

Réponse 7 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Alors j'ai exactement la même erreur que la dernière fois

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tu peux me montrer le code modifié que tu utilises ?

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Le code ajax.js ?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention

TOUS .... histoire d'être bien sûr.

Réponse 8 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Voici index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="cours.js"></script>
	<script src="ajax.js"></script>
</html>

Voici cours.js

var premMinElt = document.getElementById("premMin");
// Accès aux informations publiques sur le Premier Ministre
ajaxGet("https://api.sncf.com/v1", function (reponse) {
    var premierMinistre = JSON.parse(reponse);
    // Ajout de la description et du logo dans la page web
    var descriptionElt = document.createElement("p");
    descriptionElt.textContent = premierMinistre.description;
    var logoElt = document.createElement("img");
    logoElt.src = premierMinistre.logo;
    premMinElt.appendChild(descriptionElt);
    premMinElt.appendChild(logoElt);
});

Et voici ajax.js

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Fais l'import d'ajax.js AVANT cours.js

Puis dans cours.js remplace ton code par celui-ci

//url de l'api ciblée
var url_de_api = "https://api.sncf.com/v1";

// Accès aux informations publiques sur le Premier Ministre
var premMinElt = document.getElementById("premMin");

ajaxGet(url_de_api, function (reponse) {
    var repJson = JSON.parse(reponse);

    // Ici .. tu peux mettre le code de traitement que tu veux pour cette reponse...
    // par exemple : affiche dans la CONSOLE du navigateur la réponse   
     console.log(repJson);
  
});

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Comment ça l'import d'ajax.js avant cours.js ?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention

Ben .. au lieu de

<script src="cours.js"></script>
<script src="ajax.js"></script>

tu inverses comme ceci :

<script src="ajax.js"></script>
 <script src="cours.js"></script>

Réponse 9 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Ça ne fonctionne toujours pas voici les fichiers :

index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="ajax.js"></script>
	<script src="cours.js"></script>
</html>

cours.js

//url de l'api ciblée
var url_de_api = "https://api.sncf.com/v1";

// Accès aux informations publiques sur le Premier Ministre
var premMinElt = document.getElementById("premMin");

ajaxGet(url_de_api, function (reponse) {
    var repJson = JSON.parse(reponse);

    // Ici .. tu peux mettre le code de traitement que tu veux pour cette reponse...
    // par exemple : affiche dans la CONSOLE du navigateur la réponse   
     console.log(repJson);
  
});

et ajax.js

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Quand tu dis : ça ne fonctionne pas ... c'est à dire ??? Tu as toujours le message d'erreur ? Tu as bien fais un CTRL + F5 dans ton navigateur pour rafraichir tout en vidant son cache ?
Ou bien c'est juste que ça ne fait pas ce que tu veux ???

Quoi qu'il en soit .. qu'est-ce qui apparait dans la console ?

J'ai retesté de mon côté hier et n'ai eu aucun souci.....

Réponse 10 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Alors j'ai toujours la même erreur c'est vraiment bisard et pour la console je fait touche "Ctrl"+flèche haut+"J"

Veuillez indiquer présicément votre problème, nous faisons de notre mieux pour y répondre. Je répond à vos question de 19h à 23h la semaine :)

Réponse 11 / 11

team-off Messages postés 1194 Date d'inscription Statut Membre Dernière intervention 33

Ca fonctionne super content !! Merci beaucoup mais je comprend pas quand je met une autre api qui demande un num d'uttilisateur que j'ai bien rentrèe ca fonctionne avec cette API "https://api.sncf.com/v1/coverage/sncf/places?q=Paris" ca ne fonctionne pas je dois bien rentrée ma clé mais je dois la mettre dans le code j'ai ça comme erreur avec cette API qui ne demande pas de code "https://api.sncf.com/v1/coverage/sncf/journeys?from=admin:fr:75056&to=admin:fr:69123&datetime=20170501T232424"

Discussions similaires

tester Câble antenne TV

Test cable RJ45 cablé

comment verifier un cable RJ45 en place?

Connexion sur prise murale RJ45

Votre réponse

Discussions similaires