Sigo recibiendo "Error de sintaxis no detectado: token inesperado o"

Estoy tratando de aprender algunos html / css / javascript, así que estoy escribiendo un proyecto de enseñanza.

La idea era tener algo de vocabulario contenido en un archivo json que luego se cargaría en una tabla. Logré cargar el archivo e imprimir uno de sus valores, después de lo cual comencé a escribir el código para cargar los valores en la tabla.

Después de hacer eso, comencé a recibir un error, así que eliminé todo el código que había escrito, dejándome con una sola línea (la misma línea que había funcionado antes) ... solo el error sigue ahí.

El error es el siguiente:

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

Mi código javascript está contenido en un archivo separado y es simplemente esto:

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

Y mi archivo JSON solo tiene lo siguiente en este momento:

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

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

Ahora el error se informa en la línea 11, que es la var glacier = JSON.parse(data);línea.

Cuando elimino el archivo json, aparece el error: "OBTENER http: //.../wokab.json 404 (no encontrado)", así que sé que lo está cargando (o al menos intentando).

Parece que jQuery adivina el tipo de datos. Realiza el análisis JSON aunque no esté llamando a getJSON (); luego, cuando intenta llamar a JSON.parse () en un objeto, obtiene el error.

Se puede encontrar más explicación en la respuesta de Aditya Mittal .

El problema es muy simple

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

Lo estás analizando dos veces. getusa dataType='json', por lo que los datos ya están en formato json. ¡Use $.ajax({ dataType: 'json' ...para establecer específicamente el tipo de datos devuelto!

Básicamente, si el encabezado de respuesta es text / html, debe analizarlo, y si el encabezado de respuesta es application / json, ya está analizado por usted.

Datos analizados del controlador jquery success para la respuesta text / html:

var parsed = JSON.parse(data);

Datos analizados del controlador jquery success para la aplicación / respuesta json:

var parsed = data;

Otra sugerencia para Unexpected tokenerrores. Hay dos diferencias principales entre los objetos javascript y json:

1. Los datos json siempre deben estar entre comillas dobles.
2. las claves deben ser citadas

JSON correcto

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

Error JSON 1

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

Error JSON 2

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

Observación

Esta no es una respuesta directa a esa pregunta. Pero es una respuesta para Unexpected tokenerrores. Por lo tanto, puede ser de ayuda a otros que se atiborran de esa pregunta.

Simplemente la respuesta ya está analizada, no necesita analizarla nuevamente. si lo analiza de nuevo, le dará un "token inesperado", sin embargo, debe especificar el tipo de datos en su solicitud para que sea de tipodataType='json'

Tuve un problema similar en este momento y mi solución podría ayudar. Estoy usando un iframe para cargar y convertir un archivo xml a json y enviarlo detrás de escena, y Chrome estaba agregando algo de basura a los datos entrantes que solo aparecerían de forma intermitente y causarían el "Error de sintaxis no capturado: token inesperado o" error.

Estaba accediendo a los datos del iframe de esta manera:

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

que funcionó bien en localhost, pero cuando lo cargué en el servidor dejó de funcionar solo con algunos archivos y solo cuando cargué los archivos en un orden determinado. Realmente no sé qué lo causó, pero esto lo solucionó. Cambié la línea de arriba a

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

una vez que noté algo de basura en la respuesta HTML.

En pocas palabras, verifique sus datos de respuesta HTML sin procesar y podría subir algo.

SyntaxError: Unexpected token o in JSON

Esto también sucede cuando olvida usar la awaitpalabra clave para un método que devuelve datos JSON.

Por ejemplo:

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

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

arrojará un error debido a la falta await. Lo que realmente se devuelve es un Promise[objeto], no un string.

Para solucionarlo, solo agrega aguardar como se supone que debes:

var json_str = await returnJSONData();

Esto debería ser bastante obvio, pero se activa el error JSON.parse, por lo que es fácil pasarlo por alto si hay alguna distancia entre su awaitllamada al método y la JSON.parsellamada.

Asegúrese de que su archivo JSON no tenga ningún carácter final antes o después. Tal vez uno no imprimible? Es posible que desee probar de esta manera:

[{"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());

Donde tempActivity está alimentando los datos que producen el error "SyntaxError: token inesperado o en JSON en la posición 1 - Desbordamiento de pila"