Eu continuo recebendo "Untaught SyntaxError: token inesperado o"

Estou tentando aprender alguns html / css / javascript, então estou escrevendo para mim mesmo um projeto de ensino.

A idéia era ter algum vocabulário contido em um arquivo json que seria carregado em uma tabela. Consegui carregar o arquivo e imprimir um de seus valores, após o qual comecei a escrever o código para carregar os valores na tabela.

Depois disso, comecei a receber um erro, então removi todo o código que havia escrito, deixando-me apenas uma linha (a mesma linha que havia funcionado antes) ... apenas o erro ainda está lá.

O erro é o seguinte:

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

Meu código javascript está contido em um arquivo separado e é simplesmente este:

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

E meu arquivo JSON tem o seguinte agora:

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

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

Agora, o erro é relatado na linha 11, que é a var glacier = JSON.parse(data);linha.

Quando removo o arquivo json, recebo o erro: "GET http: //.../wokab.json 404 (Não encontrado)", então eu sei que ele está carregando (ou pelo menos tentando).

Parece que o jQuery adivinha o tipo de dados. Ele faz a análise JSON, mesmo que você não esteja chamando getJSON () - quando você tenta chamar JSON.parse () em um objeto, está recebendo o erro.

Mais explicações podem ser encontradas na resposta de Aditya Mittal .

O problema é muito simples

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

Você está analisando duas vezes. getusa o dataType='json', então os dados já estão no formato json. Use $.ajax({ dataType: 'json' ...para definir especificamente o tipo de dados retornado!

Basicamente, se o cabeçalho da resposta for text / html, você precisará analisar e, se o cabeçalho da resposta for application / json, ele já será analisado.

Dados analisados ​​do manipulador de sucesso jquery para resposta de texto / html:

var parsed = JSON.parse(data);

Dados analisados ​​do manipulador de sucesso jquery para resposta do aplicativo / json:

var parsed = data;

Outra dica para Unexpected tokenerros. Existem duas diferenças principais entre objetos javascript e json:

1. Os dados json devem ser sempre citados com aspas duplas.
2. chaves devem ser citadas

JSON correto

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

Erro JSON 1

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

Erro JSON 2

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

Observação

Esta não é uma resposta direta para essa pergunta. Mas é uma resposta para Unexpected tokenerros. Portanto, pode ajudar outras pessoas que se deparam com essa pergunta.

Simplesmente a resposta já está analisada, você não precisa analisá-la novamente. se você analisá-lo novamente, ele fornecerá "token inesperado o"; no entanto, você precisará especificar o tipo de dados na sua solicitação para ser do tipodataType='json'

Eu tive um problema semelhante agora e minha solução pode ajudar. Estou usando um iframe para fazer upload e converter um arquivo xml para json e enviá-lo de volta aos bastidores, e o Chrome estava adicionando um pouco de lixo aos dados recebidos, que só apareciam intermitentemente e causavam o "Untaught SyntaxError: token inesperado". erro.

Eu estava acessando os dados iframe assim:

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

que funcionou bem no host local, mas quando o enviei para o servidor, ele parou de funcionar apenas com alguns arquivos e apenas ao carregar os arquivos em uma determinada ordem. Eu realmente não sei o que causou, mas isso corrigiu. Eu mudei a linha acima para

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

uma vez notei algum lixo na resposta HTML.

Para encurtar a história, verifique seus dados de resposta HTML brutos e você poderá descobrir algo.

SyntaxError: Unexpected token o in JSON

Isso também acontece quando você esquece de usar a awaitpalavra - chave para um método que retorna dados JSON.

Por exemplo:

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

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

irá lançar um erro devido à falta await. O que realmente é retornado é um Promise[objeto], não um string.

Para corrigir, basta adicionar aguardar como você deve:

var json_str = await returnJSONData();

Isso deve ser bastante óbvio, mas o erro é invocado JSON.parse, por isso é fácil perder se houver alguma distância entre sua awaitchamada de método e a JSON.parsechamada.

Verifique se o arquivo JSON não possui caracteres finais antes ou depois. Talvez um imprimível? Você pode tentar desta maneira:

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

Onde tempActivity está localizando os dados que produzem o erro "SyntaxError: token inesperado o no JSON na posição 1 - Stack Overflow"