it-swarm.com.de

Reagieren Sie mit Js: Uncaught (in Versprechen) SyntaxError: Unerwartetes Token <in JSON an Position

Ich möchte meine Json-Datei in react js abrufen, dafür verwende ich fetch. Aber es zeigt einen Fehler

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

Was könnte der Fehler sein, ich bekomme keine Ahnung. Ich habe sogar meinen JSON validiert.

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

Mein Json (fr.json)

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

Fügen Sie zwei Header Content-Type und Accept hinzu, um application/json zu entsprechen.

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

Es kann vorkommen, wenn die API (die Sie verbrauchen) nicht die entsprechende JSON-Datei sendet Sie erhalten die Antwort möglicherweise als 404-Seite oder als HTML/XML-Antwort. 

0
Ashraf Zaman

Dieser Fehler kann auftreten, aber Sie müssen sich bewusst sein, dass dies ein roter Faden für das eigentliche Problem sein kann. In meinem Fall gab es kein Problem mit JSON, da der Fehler besagt, sondern es trat ein Fehler 404 auf, bei dem die zu verarbeitenden JSON-Daten nicht an erster Stelle abgerufen werden konnten, was zu diesem Fehler führte.

Das Problem wurde behoben, indem fetch auf einem .json Datei in einem lokalen Projekt, die .json Datei muss zugänglich sein. Dies können Sie tun, indem Sie es in einem Ordner wie dem Ordner public im Stammverzeichnis des Projekts ablegen. Nachdem ich die json -Datei in diesen Ordner verschoben hatte, verwandelte sich die 404 in eine 200 und die Unexpected token < in JSON at position 0 Fehler wurde behoben.

0
atconway

Die Lösung, die für mich funktioniert hat, ist: - Ich habe meine data.json-Datei von src in das öffentliche Verzeichnis ..__ verschoben. Dann habe ich die Abruf-API zum Abrufen der Datei verwendet.

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);
        });

Das Problem war, dass die Abrufanforderung nach dem Kompilieren der reakt-App nach der Datei unter der URL " http: // localhost: 3000/data.json " sucht, die eigentlich das öffentliche Verzeichnis meiner Reaktiv-App ist. Leider wird die Datei data.json beim Kompilieren nicht von src in das öffentliche Verzeichnis verschoben. Daher müssen wir die Datei data.json explizit von src in das öffentliche Verzeichnis verschieben.

0
Akash Seth

Ich habe den gleichen Fehler erhalten, weil die API nur eine Zeichenfolge zurückgab, aber beim Abruf erwartete ich json:

response => response.json()

Die Rückgabe von json von der API hat das Problem für mich gelöst. Wenn Ihre API json nicht zurückgeben soll, tun Sie einfach nicht response.json()

0