[jQuery] Récupérer les données d'une API

Parad0xJ
Javascript

Bonjour,

Je suis en phase d'apprentissage, j'ai appris les bases de javascript et depuis quelques mois je code avec jQuery. J'aimerais profiter des API dans mes futurs programmes, j'ai appris à le faire avec javascript, comme je n'ai pas l'habitude c'est quand même déjà assez difficile.

Depuis 3 jours j'essai de faire la même chose avec jQuery d'aprés la doc. et le livre que je suis : 'Le Framwork JavaScript' Editions Eni, ça serait beaucoup plus simple avec jQuery !? Je n'ai pas de problème avec le fait de charger un fichier avec load() par exemple, même une partie simplement, ça je sais le faire. C'est vraiment récuperer les données d'une API et de les afficher, pour l'exemple j'ai pris l'API du Prime minister elle est libre c'est plus simple pour s'y connecter pas besoin de clef.

J'ai testé plusieurs chose avec get() getJSON() etc, mais je n'arrive pas a afficher la moindre chose, si je regarde ma console la connexion semble se faire correctement, je pense que la base du code que je mets ci-dessous, je doit être sur la bonne voie, mais je n'arrive pas à allez plus loin, je n'ai pas d'erreur. mais rien ne s'affiche, je dois pas avoir compris quelque chose, pouvez vous m'aider ?
Merci d'avance

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

$(document).ready(function () {
    $.ajax({"https://www.data.gouv.fr/api/1/organizations/premier-ministre/",
    success: function(data){
$('#contenu').html(data);
}
});
});

15 réponses

Lartak
Réponse acceptée

Il te suffit de faire par exemple :

$(document).ready(function () {
    $.ajax("https://www.data.gouv.fr/api/1/organizations/premier-ministre/", {
        success: function(data) {
            $('#logo').html('<img src="' + data.logo + '" alt="logo"/>');
            $('#description').text(data.description);
        }
    });
});
Lartak

Bonjour.
Tu utilises mal la fonction ajax, soit tu fais :

$.ajax("https://www.data.gouv.fr/api/1/organizations/premier-ministre/", {
    success: function(data){
        $('#contenu').html(data);
    }
})

Ou alors :

$.ajax({
    url: "https://www.data.gouv.fr/api/1/organizations/premier-ministre/",
    success: function(data){
        $('#contenu').html(data);
    }
})

Mais pas comme tu le fais.
Ensuite, si tu veux afficher du json dans ton code HTML, il te faut transformer le format de sortie, par exemple $('#contenu').html(JSON.stringify(data)); sinon tu n'auras jamais d'affichage dans ton code HTML.

Parad0xJ
Auteur

@Lartak
Bonjour,
je fini de manger et je teste ça.
Merci !

Pierrot01

si tu veux afficher le json il faut faire :
var xx = $.ajax({
url: "https://www.data.gouv.fr/api/1/organizations/premier-ministre/",async : false,
}).responseText;
$('#contenu').html(data);

Parad0xJ
Auteur

@Lartak Effectivement ça me retourne tout sans mise en forme, j'ai déjà obtenu la même chose en testant get.JSON() il me semble, en tout cas j'ai déjà obtenu ce resultat. C'est à moi de mettre en forme pour l'affichage via jQuery ?

edit: @Pierrot01, je teste ça merci

Parad0xJ
Auteur

@Pierrot01 Désolé mais ça me donne une grosse belle erreur dans la console et cela n'affiche rien. Concernant la fonction ajax, d'(apres mon bouquin, async et false sont optionnel.

@Lartak Tu es certainement plus spécialiste que moi, mais si je suis ce qui est dit dans la Doc, JSON.stringify convertit du javascript en Json, moi je veux justement faire le contraire non ? c'est normal qu'avec ça -->$('#contenu').html(JSON.stringify(data)); j'obtiens une liste brut.
L'aPI est en format Json donc je voudrais que la reponse me retourne du json exploitable dans mon html, comme le logo ou la description par exemple ?
Je me dis que json.PARSE serait plus adapté comme en js pur. Bon je vais continuer mes tests je vais bien finir par trouver

Merci de votre aide je sais que je capte mal ajax désolé

Pierrot01

Parad0xJ
Me suis trompé ;)
$('#contenu').html(xx);
@plus

Parad0xJ
Auteur

@Pierrot01
Ah oui c'est bien ça mais ça me donne aussi les données en brut genre comme ça dans la page
{"acronym": null, "badges": [{"kind": "public-service"}, {"kind": "certified"}], "created_at": "2014-04-17T18:21:57.325000", "deleted": null, "description": "\nAux c\u00f4t\u00e9s de son cabinet, l\u2019administration du Premier ministre comprend de nombreux services qui l\u2019assistent et prennent part \u00e0 l\u2019\u00e9laboration de la politique du Gouvernement. Sont rattach\u00e9s au Premier ministre les organismes charg\u00e9s de
comment je peux mettre ça en forme ? si tu as encore 2 minutes merci

Pierrot01

tu veux afficher quoi exactement ?

Parad0xJ
Auteur

admettons que je veuille afficher le logo et la description par exemple

Parad0xJ
Auteur

@Lartak
Déjà mille merci de prendre le temps de me répondre se problème me saoul !!!
rien à faire le dernier code donné ne fonctionne pas chez moi, pas d'erreur dans la console mais rien ne s'affiche.

EDIT : mon antivirus bloquait, superbe ça fonctionne parfaitement un enorme Merci

Lartak

Pourtant regardes ici.

Parad0xJ
Auteur

OUI oui autant pour moi c'est mon antivirus qui bloquait je m'en suis aperçu dans la console, en l'eteignant + un refresh du navigateur tout s'est bien affiché.
Merci++

Lartak

Ok, de rien.

Pierrot01

créé une dic avec l'id 'logo' et une autre avec l'id 'description'
@plus