"fetch: api to website"

Résolu/Fermé

Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 - Modifié le 13 juin 2022 à 12:11
Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 - 13 juin 2022 à 21:12

Bonjour, je souhaite récupérer une donnée api

J'ai regardé ce tuto

https://www.youtube.com/watch?v=2lt4HmLm8LE&ab_channel=NadfriJS

Mais Rien ne s'affiche côté Web.

Merci d'avance

HTML:

<input type="text" placeholder="Score">
         <button id="btn">GET Info</button>
         <div id="output"></div>

Javascript:

var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer tokenIci");

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

btn.onclick= () =>{
  fetch("lienApiIci", requestOptions)
  .then(response => response.json())
  .then(data => {
    output.textcontent = "";
    output.textcontent = 'Compte de ${data.clanTag.clanScore}';
  })
  .catch(error => console.log('error', error));
}

Configuration: Configuration: Windows / Firefox 101.0

A voir également:

"fetch: api to website"
Fetch art - Télécharger - Catalogage
Php fetch Erreur while fetch - Forum PHP
Call to a member function fetch() on bool - Forum PHP
Problème fetch et addEventListener, impossible faire console.log - Forum Javascript
Erreur undefined method PDO fetch - Forum PHP

8 réponses

Réponse 1 / 8

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
13 juin 2022 à 18:09

Il ne semble pas possible d'utiliser l'API de clashroyale.com via du JavaScript dans un navigateur (coté client) à cause du mécanisme CORS (Cross-origin resource sharing), essaye si possible d'utiliser un script coté serveur.
Un exemple avec PHP : https://pastebin.com/2Af68dv5

Réponse 2 / 8

Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 21:18

Merci. Génial! Pitet vous êtes un chef! J'ai configuré avec xampp. Je reçois les données dans ma page indexhtml.php

Je vais essayer d'isoler une donnée avant de cloturer la discussion

Réponse 3 / 8

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
13 juin 2022 à 12:11

Bonjour,

Quel est le message d'erreur affiché dans la console ?

Si besoin, essaye de l'afficher comme ceci :

    .catch(error => console.log('error', error.message));

Réponse 4 / 8

Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
13 juin 2022 à 12:38

J'ai ceci:

TypeError: i is undefined
util.js:56
ReferenceError: $ is not defined
script.js?ver=18:110
error
NetworkError when attempting to fetch resource.

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié le 13 juin 2022 à 12:44

Les premiers message d'erreur ne correspondent pas au code de ton premier message (pas de variable i dans ton code, ni d'utilisation de $). Un problème/oubli de chargement pour jQuery ?
Commence par corriger les autres erreurs de ton script.

Tu as bien modifier le lien de l'API dans ton code ("lienApiIci") ? Quel est le status code dans l'onglet réseau des outils de développement du navigateur pour ce lien (404 ou autre) ?

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

Posez votre question

Réponse 5 / 8

Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 14:13

Autant pour moi ces erreurs venaient d'ailleurs et je les ai corrigé.

Quand je clique sur le bouton "Get info" ça parcours mon fichier javascript index.js et ça me met:

error
NetworkError when attempting to fetch resource.

Quand je coupe le debug, j'ai la requête OPTION au code 200 et GET de mon api à 403

Et dans le <head></head> j'ai:


<script src="jquery-3.6.0.min.js"></script>
<script src="index.js" defer></script>

A la base, j'ai pris la requête généré sous postman du fetch javascript puis je l'ai modifié avec le tuto.

J'ai remplacé le lienApiIci et le Token oui

Réponse 6 / 8

Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 14:33

Maintenant le code Get me renvoie 400 ou 403 suivant ce que je fais

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
13 juin 2022 à 14:48

Le status code 400 indique que le requête n'est pas correcte (syntaxe ou contenu invalide). 403 indique un problème d'autorisation. Le token passé dans l'entête est correcte ?
C'est pour utiliser quelle API (Clash of Clan à priori) ? Essaye de consulter la documentation de l'API, tu devrais y trouver plus d'infos.

Réponse 7 / 8

Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 15:40

J"essaye de récupérer un get clanTag mais toujours cette erreur 400

"Le client fournit des paramètres incorrecte pour la requête."

https://developer.clashroyale.com/#/documentation

Réponse 8 / 8

Warren37 Messages postés 40 Date d'inscription vendredi 10 juin 2022 Statut Membre Dernière intervention 25 septembre 2023 3
Modifié le 13 juin 2022 à 17:25

Dans réseau quand je clique sur le fichier .js où il y a le code 400 et j'ai:

btn.onclick

(Asynchrone : EventHandlerNonNull)

Discussions similaires

Différence entre fetch et fetchAll en PDO

Code erreur: Fatal error: Call to a member function fetch()

l'opération courante "courrier entrant" n'as pas aboutie le serveur de

Je ne vois plus mes abonnements sur Instagram

fetch()

Discussions similaires

Newsletters