Bonjour à tous,

j'ai un soucis avec un de mes anciens projets OC en react que j'essaie de redémarrer et améliorer, le Projet Front-end Sportsee.

J'avais mocké les données pour les avoir en local sur un JSON que j'ai mis dans mon dossier "public" (nommé "mockeddatas.json").

je veux donc fetcher les données (le fichier js me permettant de mocker les données est dans un dossier dans "src", a coté de "public"). Il y a quelques mois, quand j'avais monté le code, le mock fonctionnait bien et le fetch me transmettait bien ses données. Mais maintenant que je reprends mon projet, c'est le drame, mon fetch ne fonctionne plus.

Voici mon code fetch (userId est mon URI, 12 en l'occurrence, qui est récupéré, je vois qu'il est bien récupéré lorsque je fais un point d'arret):

export default class Usefetch {
  static async getUser(userId) {
    return fetch("./mockeddatas.json")
      .then((result) => result.json())
      .then((data) => {
        return data.USER_MAIN_DATA.find((user) => user.id === userId);
      }).catch((error) => {
        console.log("erreur fetch 1");
      });
  }

  static async getUserActivity(userId) {
    return fetch("./mockeddatas.json")
      .then((result) => result.json())
      .then((data) => {
        return data.USER_ACTIVITY.find((user) => user.userId === userId);
      }).catch((error) => {
        console.log("erreur fetch 2");
      });
  }

  static async getUserAverageSessions(userId) {
    return fetch("./mockeddatas.json")
      .then((result) => result.json())
      .then((data) => {
        return data.USER_AVERAGE_SESSIONS.find((user) => user.userId === userId);
      }).catch((error) => {
        console.log("erreur fetch 3");
      });
  }

  static async getUserPerformance(userId) {
    return fetch("./mockeddatas.json")
      .then((result) => result.json())
      .then((data) => {
        return data.USER_PERFORMANCE.find((user) => user.userId === userId);
      }).catch((error) => {
        console.log("erreur fetch 4");
      });
  }
}

Les console.log m'indiquent bien pour les 4, "erreur fetch", ainsi que plusieurs fois une erreur "Error: <path> attribute d: Expected number, "M NaN,NaNL NaN,NaN…"."

J'ai voulu voir mon result.json, donc j'ai changé mon 

.then((result) => result.json())

en

.then((result) => console.log(result.text()))

et ce que j'ai, c'est ma promesse, avec comme promiseResult le code HTML de ma page.

En allant dans le network, je vois bien mes 4 fetch, avec un statut 304 OK, mais quand je vois leurs réponse, je vois le code HTML de la page (mon DOCTYPE avec ma div root). Et ce qui est étrange, c'est que si je delete mon fichier JSON, et que je recharge la page, rien ne change, les erreurs sont les mêmes, et rien ne m'indique que le JSON est manquant.

Le JSON est dans le bon format, VS ne me donne pas d'erreurs, et je l'ai passé dans un JSONformatter, il n'y a pas d'erreurs. En voici un extrait :

{
  "USER_MAIN_DATA": [
    {
      "id": 12,
      "userInfos": {
        "firstName": "Karl",
        "lastName": "Dovineau",
        "age": 31
      },
      "todayScore": 0.12,
      "keyData": {
        "calorieCount": 1930,
        "proteinCount": 155,
        "carbohydrateCount": 290,
        "lipidCount": 50
      }
    },
    {
      "id": 18,
      "userInfos": {
        "firstName": "Cecilia",
        "lastName": "Ratorez",
        "age": 34
      },
      "score": 0.3,
      "keyData": {
        "calorieCount": 2500,
        "proteinCount": 90,
        "carbohydrateCount": 150,
        "lipidCount": 120
      }
    }
  ]
}

Je commence a ne plus voir comment faire pour trouver le problème, et surtout trouver une solution. Quelqu'un aurait il une idée d'où le problème pourrait venir ?

-
Edité par Le 51e 23 juin 2022 à 13:46:52

Bonjour au lieu d'un chemin transmet une url a fetch pour voir

si ton truc est dans public/config.json transmet

http://ton_url_local.local/public/config.json

au lieu de ./public/config.json

je penses que ça devrait corriger ton soucis

Je viens de tester, et cela ne fonctionne pas. J'ai comme erreur "net::ERR_NAME_NOT_RESOLVED".

Et puis ce n'est pas une solution que je veux. le final est que je puisses publier le projet sur Github pages, donc je dois passer par un chemin interne au projet. 

Merci en tout cas pour l'idée 

Tu utilises chrome ?

Pour coder, j'utilise Edge et Chrome. Et pour les erreurs comme celle ci, j'utilise en plus firefox. Au cas ou si l'un des trois me donne des infos supplementaires

D'après ce que j'ai pu lire rapidement c'est une erreur courante surtout sur chrome tu peux te tenter à ça voir si cela règle ton soucis car personnellement je ne vois pas d'erreur au niveau du code et si tu avais fait ce qui dit au dessus l'url complète ne passe pas non plus donc reste à voir si le soucis ne vient pas du navigateur. 

Vu que tu test aussi sur firefox c'est le même résultats ? 

https://www.hostinger.com/tutorials/err_name_not_resolved#How_to_Fix_ERR_NAME_NOT_RESOLVED_Video_Guide

J'avais cherché auparavant, et j'avais deja vu ces solutions que j'ai test, mais cela ne marche pas.

En gros, lors du fetch, le "data" est défini en "undefined", c'est comme si il ne trouvait pas le fichier JSON ou alors il me prend le fichier index.html pour le fichier JSON (vu que j'ai en réponse mon code HTML).

J'ai au cas ou, changé de place le fichier JSON et changé le chemin des fetch (j'ai testé en partant du fichier index.html qui se trouve dans "public", et en partant du dossier ou se trouve le fichier fetch), mais le résultat reste le même

Un scree. ou une représentation de ton arborescence en pensant aussi à faire un ctrl +f5 pour vider le cache on sait jamais

si je comprends bien mock.js est dans ton dossier service

si tu remplaces ton chemin par ça qu'est ce que ça donne

../../public/mockeddatas.json

ou 

/public/mockeddatas.json

ou 

ton_prefix_local/public/mockeddatas.json

qu'est ce que ça te donne ?? 

J'avais deja testé, au cas ou, mais la en réessayant, rien de neuf, toujours la meme erreur.

Ca ne m'étonne pas, vu qu'en local, un fetch ira prendre le JSON exclusivement la ou se trouve l'index.html (c'est pour ca que mon chemin se limite à ./mockeddatas.json). Mais ouai, faut tester

-
Edité par Le 51e 23 juin 2022 à 14:07:41

Oui il faut qu'on test des choses car le code n'est pas faux

affiche l'erreur du catch voir ce qu'elle dit même si possiblement la même on est réduit à tester d'ici à faire un peu de lecture pour comprendre les causes de cet erreur et d'ailleurs tu n'avais pas répondu

l'erreur se passe uniquement sous chrome ou sur tous les autres ? 

-
Edité par zvheer 23 juin 2022 à 14:18:40

Voila la console :

Mince, scuse, Edge et Chrome donnent ces memes erreurs. Quant a Firefox, il m'affiche seulement les erreurs Fetch de mes consoles log (et quelques avertissements concernant des unités de hauteurs en CSS).

EDIT : les erreurs une fois déployées :

-
Edité par Le 51e 23 juin 2022 à 14:30:54

Ici ça ne semble pas être des erreurs par rapport a cette partie mais sûrement le path d'un svg ce que je demandais c'était au lieu d'afficher erreur fetch 1 de faire console.log(error) dans tes catchs et testons via firefox pour commencer ça enlevera les erreurs possibles côtés navigateurs même si je pense que ton soucis vient de là on ne sait jamais

Voila le résultat. Alors que Edge et Chrome me donnait comme erreur "SyntaxError: Unexpected token < in JSON at position 0" (le < correspondant au 1er caractère de mon code HTML, ca étayait mon avis sur le fait qu'il fetchait mon code HTML)

Firefox me donne "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data", ce qui semble etre la meme erreur.

J'ai quand meme remplacé mon

      .then((result) => result.json())

par

      .then((result) => JSON.parse(JSON.stringify(result)))

mais cela ne donne rien de plus car "result" comme "data" sont "undefined"

non passe au result.text() voir ce que ça te donne c'est forcément une page html mais tant qu'on test passe a du result.text()

puis un console.log de ce text

-
Edité par zvheer 23 juin 2022 à 15:24:32

le console.log(result.text()) me retourne la promesse, ET me fait avoir une erreur différente au catch(error), de ce meme fetch. Au lieu de "SyntaxError: Unexpected token < in JSON at position 0",

j'ai "TypeError: Cannot read properties of undefined (reading 'USER_MAIN_DATA')
    at mock.js:15:1"

C'est normal que USER_MAIN_DATA soit undefined si il lit le HTML de index.html, comme on le voit dans le résultat de la promesse. Franchement, je ne comprend pas, c'est pas logique du tout. Ca fait 2 jours que je suis sur cette erreur, je ne dois plus réflechir de manière raisonné, et je rate peut etre quelque chose, mais franchement, je ne trouve pas ca logique

On fait les test dans l'ordre, s'il lis ton html nous sommes d'accord que le chemin de ton json est mauvais, donc remer un chemin global sous forme d'url ou un chemin qui part de la racine poste le code ici après qu. on soit d'accord retestes toujours sous firefox en vidant le cache à chaque fois

tu es sous node js je ne sais pas si tj utilises nodemon mais vérifie aussi que tout c'est bien restart après changement sait on jamais 

-
Edité par zvheer 23 juin 2022 à 15:29:03

Ok, donc j'ai remplacé dans le fetch :

par :

j'ai comme erreur console :

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://c/Users/louis/OneDrive/Bureau/MOOC/P12/projet-sportsee/projetsportsee/projetsportsee/projet-sportsee/public/mockeddatas.json. Raison : échec de la requête CORS. Code d’état : (null).

Je ne connaissais pas Nodemon, je viens de voir ce que c'était. Je vide la cache a chaque fois depuis que je suis face a des erreurs. Et React me mets a jour la page a chaque fois que je save sur VS code.

http://C:/Users/louis/OneDrive/Bureau/MOOC/P12/projet-sportsee/projetsportsee/projetsportsee/projet-sportsee/public/mockeddatas.json

Normalement ton url ne devrait pas ressembler à ceci

Je pense que tu es sous node js vu les dossiers et le code donc j'imagine que tu lance le serveur et que l'url t'est donné via le terminal ? c'est simple à vérifier il te suffit de taper cet url dans ton navigateur, si le fichier json apparaît alors c'est bon sinon c'est que ce n'est toujours pas la bonne url

nodemon sert à relancer le serveur justement je ne me suis jamais intéressé à react donc j'avoue ne pas trop savoir s'il fait de même 

-
Edité par zvheer 23 juin 2022 à 15:48:59

nope, c'est une url manuelle que j'ai bricolé en prenant l'url de ma fenetre local et en ajoutant http:// devant, je pensais que c'était légit

J'ai utilisé plutot (et firefox m'amène bien au JSON):

et j'ai comme erreur :

Erreur de sécurité : le contenu situé à http://localhost:3000/projetsportsee/12 ne peut pas charger de données ou établir un lien vers file:///C:/Users/louis/OneDrive/Bureau/MOOC/P12/projet-sportsee/projetsportsee/projetsportsee/projet-sportsee/public/mockeddatas.json.

D'accord, c'est un peu comme l'extension VS "live-server" qui te rafraichit la page dès que tu save un fichier de ton projet, c'est ce que je j'utilise pour mes projets hors react

-
Edité par Le 51e 23 juin 2022 à 15:58:10

oui ton url de projet est plutôt 

http://localhost:3000/projetsportsee/12

je ne sais pas à quoi se rapporte le 12 mais l'url devrait commencer par quelque qui ressemble à ça 

Oui, c'est l'url local de mon projet. Le 12 est l'uri correspondant à l'utilisateur. Je récupère cet uri qui me permet ensuite de fetcher les données de l'utilisateur 12 dans mon JSON. Si je mets 18, cela me récuperera les données de l'utilisateur 18, par exemple

Oui donc essaie d'accéder à ton fichier json à la base de cette url sans le 12 du coup, quand ca fonctionnera copie l'url en question dans ton fetch pour tester toujours en gardant nos.text()...

Je n'y arrive pas. J'ai beau rentrer différentes url possible, je retombe a chaque fois sur ma page index.html. Meme avec juste "http://localhost:3000". Je ne sais pas comment se passe la compilation react pour afficher la page, ca vient peut etre de la.

Ecoute, je dois y aller, et je veux pas t'embeter plus longtemps. je reprendrais ca ce soir à tete reposé, une fois rentré. Merci en tout cas du temps consacré pour mon soucis, c'est sympa à toi !

J'essaierai de me ranger sur sur react pour essayer de te faire un exemple

Je viens de corriger le problème.

je ne sais pas si c'est une bonne pratique, mais ca m'a permis de voir ce qui n'allait pas et corriger le soucis.

J'ai revert mon commit, et effacé les modifs que j'avais fait dernièrement. Puis j'ai refait pas à pas ce que j'avais modifié. Et il s'avère que le soucis a été crée par ES Lint. C'est un plug in sur VS code qui identifie des soucis (pour la plupart synthaxique) dans ton code.

Mes fetch se présente comme ceci :

export default class Usefetch {
  static async getUser(userId) {
    return fetch("./mockeddatas.json")
      .then((result) => result.json())
      .then((data) => {
        return data.USER_MAIN_DATA.find((user) => user.id === userId);
      }).catch((error) => {
        console.log(error);
      });
  }

Les erreurs venaient des 3 égales, les égalités strictes. Lors du montage de mon code, j'en avais mis que 2, et je n'avais pas d'avertissement d'ES Lint. Lorsque j'ai repris mon projet dernièrement, ES Lint a du avoir eu une MAJ et m'a souligné les 2 égales en me disant "Expected '===' and instead saw '=='". Je n'ai pas réflechi, et je l'ai écouté.

Pourquoi les égalités strictes m'ont provoqué des erreurs ? je ne sais pas, je ne vois pas forcément pourquoi, sachant que "user.userId" et "userId" sont tous les deux des "numbers", et que ces nombres sont identiques. Je ne suis pas assez calé sur les égalités pour voir ce qui n'allait pas.

J'ai toujours les avertissements d'ES Lint, mais ce ne sont pas des erreurs, donc React peut me compiler le code.

Je ne m'attendais pas à ce que cela vienne de la, mais au moins maintenant c'est reglé ! je te remercie zvheer pour ton aide, et le temps que tu as passé à m'aider, c'est super sympa de ta part ! 

-
Edité par Le 51e 23 juin 2022 à 22:18:55

La triple égalité compare aussi les types ce que tu as dans ton url sera de type string mais dans ton JSON de type int donc aucun résultat trouvé par find même si même sans résultat je ne vois pas ce qui poserait problème j'imagines que tu as traiter le cas. c'est vrai que mon esprit ne s'est pas porté dessus non plus

Essaie de vérifier si je ne dis pas de betise en affichant typeof userId et typeof user_id du JSON

Si c'est réglé tant mieux courage pour la suite 

-
Edité par zvheer 23 juin 2022 à 22:23:07

Effectivement, meme si c'est un chiffre, le 12 (urlId) contenu dans l'url est un string, alors que user.id est un number.

Je ne me serais pas douté que, parce que c'est contenu dans l'url, ca devient un string, je ne savais pas. Au moins, je ne risque pas de l'oublier !

Merci, bonne continuation à toi