Je reçois toujours «Syncaxe non capturée: jeton inattendu o»

J'essaie d'apprendre du html / css / javascript, donc je m'écris un projet d'enseignement.

L'idée était d'avoir du vocabulaire contenu dans un fichier json qui serait ensuite chargé dans une table. J'ai réussi à charger le fichier et à imprimer l'une de ses valeurs, après quoi j'ai commencé à écrire le code pour charger les valeurs dans la table.

Après avoir fait cela, j'ai commencé à obtenir une erreur, j'ai donc supprimé tout le code que j'avais écrit, me laissant avec une seule ligne (la même ligne qui avait fonctionné auparavant) ... seule l'erreur est toujours là.

L'erreur est la suivante:

Uncaught SyntaxError: Unexpected token o
(anonymous function)script.js:10
jQuery.Callbacks.firejquery-1.7.js:1064
jQuery.Callbacks.self.fireWithjquery-1.7.js:1182
donejquery-1.7.js:7454
jQuery.ajaxTransport.send.callback

Mon code javascript est contenu dans un fichier séparé et est simplement le suivant:

function loadPageIntoDiv(){
    document.getElementById("wokabWeeks").style.display = "block";
}

function loadWokab(){
    //also tried getJSON which threw the same error
    jQuery.get('wokab.json', function(data) {
        var glacier = JSON.parse(data);
    });
}

Et mon fichier JSON a juste ce qui suit en ce moment:

[
    {
        "english": "bag",
        "kana": "kaban",
        "kanji": "K"
    },

    {
        "english": "glasses",
        "kana": "megane",
        "kanji": "M"
    }
]

Maintenant, l'erreur est signalée à la ligne 11 qui est la var glacier = JSON.parse(data);ligne.

Lorsque je supprime le fichier json, j'obtiens l'erreur: "GET http: //.../wokab.json 404 (Not Found)", donc je sais qu'il le charge (ou du moins essaie de le faire).

On dirait que jQuery fait une supposition sur le type de données. Il effectue l'analyse JSON même si vous n'appelez pas getJSON () - puis lorsque vous essayez d'appeler JSON.parse () sur un objet, vous obtenez l'erreur.

Des explications supplémentaires peuvent être trouvées dans la réponse d'Aditya Mittal .

Le problème est très simple

jQuery.get('wokab.json', function(data) {
    var glacier = JSON.parse(data);
});

Vous l'analysez deux fois. getutilise le dataType='json', donc les données sont déjà au format json. Utilisez $.ajax({ dataType: 'json' ...pour définir spécifiquement le type de données renvoyé!

Fondamentalement, si l'en-tête de réponse est text / html, vous devez analyser, et si l'en-tête de réponse est application / json, il est déjà analysé pour vous.

Données analysées du gestionnaire de réussite jquery pour la réponse texte / html:

var parsed = JSON.parse(data);

Données analysées à partir du gestionnaire de réussite jquery pour la réponse application / json:

var parsed = data;

Un autre indice d' Unexpected tokenerreurs. Il existe deux différences majeures entre les objets javascript et json:

1. Les données json doivent toujours être mises entre guillemets.
2. les clés doivent être citées

JSON correct

 {
    "english": "bag",
    "kana": "kaban",
    "kanji": "K"
}

Erreur JSON 1

 {
    'english': 'bag',
    'kana': 'kaban',
    'kanji': 'K'
 }

Erreur JSON 2

 {
    english: "bag",
    kana: "kaban",
    kanji: "K"
}

Remarque

Ce n'est pas une réponse directe à cette question. Mais c'est une réponse aux Unexpected tokenerreurs. Il peut donc être utile à ceux qui trébuchent sur cette question.

Simplement, la réponse est déjà analysée, vous n'avez pas besoin de l'analyser à nouveau. si vous l'analysez à nouveau, cela vous donnera un "jeton inattendu", mais vous devez spécifier le type de données dans votre demande pour qu'il soit de typedataType='json'

J'ai eu un problème similaire tout à l'heure et ma solution pourrait aider. J'utilise un iframe pour télécharger et convertir un fichier xml en json et le renvoyer dans les coulisses, et Chrome ajoutait des ordures aux données entrantes qui n'apparaissaient que de manière intermittente et provoquaient la "Syncaxe non capturée: erreur: jeton inattendu o" Erreur.

J'accédais aux données iframe comme ceci:

$('#load-file-iframe').contents().text()

ce qui fonctionnait bien sur localhost, mais lorsque je l'ai téléchargé sur le serveur, il a cessé de fonctionner uniquement avec certains fichiers et uniquement lors du chargement des fichiers dans un certain ordre. Je ne sais pas vraiment ce qui l'a causé, mais cela l'a corrigé. J'ai changé la ligne ci-dessus en

$('#load-file-iframe').contents().find('body').text()

une fois que j'ai remarqué des ordures dans la réponse HTML.

En bref, vérifiez vos données de réponse HTML brutes et vous pourriez trouver quelque chose.

SyntaxError: Unexpected token o in JSON

Cela se produit également lorsque vous oubliez d'utiliser le awaitmot clé pour une méthode qui renvoie des données JSON.

Par exemple:

async function returnJSONData()
{
   return "{\"prop\": 2}";
}

var json_str = returnJSONData();
var json_obj = JSON.parse(json_str);

va lancer une erreur en raison de la disparition await. Ce qui est réellement retourné est un Promise[objet], pas un string.

Pour corriger, ajoutez simplement attendre comme vous êtes censé le faire:

var json_str = await returnJSONData();

Cela devrait être assez évident, mais l'erreur est appelée JSON.parse, il est donc facile de la manquer s'il y a une certaine distance entre votre awaitappel de méthode et l' JSON.parseappel.

Assurez-vous que votre fichier JSON ne comporte aucun caractère de fin avant ou après. Peut-être une version non imprimable? Vous voudrez peut-être essayer de cette façon:

[{"english":"bag","kana":"kaban","kanji":"K"},{"english":"glasses","kana":"megane","kanji":"M"}]

const getCircularReplacer = () => {
              const seen = new WeakSet();
              return (key, value) => {
                if (typeof value === "object" && value !== null) {
                  if (seen.has(value)) {
                    return;
                  }
                  seen.add(value);
                }
                return value;
              };
            };
JSON.stringify(tempActivity, getCircularReplacer());

Où tempActivity récupère les données qui produisent l'erreur "SyntaxError: jeton inattendu o dans JSON à la position 1 - Débordement de pile"