web-dev-qa-db-fra.com

Réagissez Js: Uncaught (promis) SyntaxError: Jeton inattendu <en JSON à la position

Je veux récupérer mon fichier Json dans react js, pour cela j'utilise fetch. Mais cela montre une erreur

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Quelle pourrait être l'erreur, je ne reçois aucune idée. J'ai même validé mon JSON.

handleGetJson(){
  console.log("inside handleGetJson");
  fetch(`./fr.json`)
    .then((response) => response.json())
    .then((messages) => {console.log("messages");});
}

Mon Json (fr.json)

{
  "greeting1": "(fr)choose an emoticon",
  "addPhoto1": "(fr)add photo",
  "close1": "(fr)close"
}
javascriptjsonajaxreactjs
12
iamsaksham

Ajoutez deux en-têtes Content-Type et Accept pour qu'ils soient égaux à application/json.

handleGetJson(){
  console.log("inside handleGetJson");
  fetch(`./fr.json`, {
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }

    })
    .then((response) => response.json())
    .then((messages) => {console.log("messages");});
}
25
Abdennour TOUMI

Cela peut arriver lorsque l'API (que vous consommez) n'envoie pas le fichier JSON correspondant . Vous pouvez rencontrer la réponse sous la forme d'une page 404 ou de quelque chose comme une réponse HTML/XML. 

0
Ashraf Zaman

La solution qui a fonctionné pour moi est la suivante: - J'ai déplacé mon fichier data.json de src vers le répertoire public . J'ai ensuite utilisé l'API d'extraction pour extraire le fichier.

fetch('./data.json').then(response => {
          console.log(response);
          return response.json();
        }).then(data => {
          // Work with JSON data here
          console.log(data);
        }).catch(err => {
          // Do something for an error here
          console.log("Error Reading data " + err);
        });

Le problème était qu’après la compilation de l’application Réaction, la demande d’extraction cherchait le fichier à l’adresse " http: // localhost: 3000/data.json ", qui est en fait le répertoire public de mon application Réactif. Mais malheureusement, lors de la compilation, le fichier data.json de l'application n'est pas déplacé de src vers un répertoire public. Nous devons donc explicitement déplacer le fichier data.json de src vers le répertoire public.

0
Akash Seth