Tester une API
team-off
Messages postés
1379
Statut
Membre
-
team-off Messages postés 1379 Statut Membre -
team-off Messages postés 1379 Statut Membre -
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
Et le fichier cours.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
--
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 :)
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
--
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 :)
11 réponses
-
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
-
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); } -
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);
} -
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 ! -
-
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>
-
-
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);
}
-
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 :)-
-
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
}
]
}- 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); });
-
-
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...
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
-
Ah non je ne savais pas mais le "ajax.js" je le laisse tel quels ?
-
..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 )
-
-
Alors j'ai exactement la même erreur que la dernière fois
-
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);
}
-
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); });
-
-
Ç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);
}
-
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.....
-
-
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 :) -
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"
