Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Erro ao tentar trazer o arquivo JSON

Uncaught (in promise) SyntaxError: Unexpected token } in JSON at position 68

7 respostas

Fala Yuri, tudo bem?

Esse erro acontece devido à um caractere inesperado }

Poste aqui seu código completo para que eu dê uma olhada!

Abraços.

function desenharGraficos(){

//grafico de pizza
var tabela = new google.visualization.DataTable();
//colunas da tabela
tabela.addColumn('string','categorias');
tabela.addColumn('number', 'valores');
//linhas da tabela
    tabela.addRows([
        ['Educação',2000],
        ['Transporte',500],
        ['Lazer',230],
        ['Saúde',50],
        ['Cartão de crédito',900],
        ['Alimentação',260]
    ]);    
//opcoes que customizam o grafico
    var opcoes = {
        title:'Tipos de Gastos',
        height: 400,
        width: 800,
        is3D: true,
        legend: 'labeled',
        pieSliceText: 'value',
        //colors:['grey', 'red', 'yellow', 'blue', 'pink', 'purple']
        slices: 
            {
                1:{color:'grey'},
                2:{color:'#a6a6a6'},
                4:{offset: 0.4},
                3:{color:'grey'},
                5:{color:'grey'}
            }
        };
//desenhando grafico
var grafico = new google.visualization.PieChart(document.getElementById('graficoPizza'));
        grafico.draw(tabela, opcoes);

//grafico de linha
tabela = new google.visualization.DataTable();
//colunas da tabela
tabela.addColumn('string','mês');
tabela.addColumn('number', 'gastos');
//linhas da tabela
    tabela.addRows([
        ['jan',800],
        ['fev',400],
        ['mar',1100],
        ['abr',400],
        ['mai',500],
        ['jun',750],
        ['jul',1500],
        ['ago',650],
        ['set',850],
        ['out',400],
        ['nov',1000],
        ['dez',720]
    ]);
//opcoes que customizam o grafico
    var opcoes = {
        title: 'Gastos por mês',
        width: 650,
        height: 300,
        vAxis: 
            {
            format: 'currency', 
            gridlines: {
                        count:5, 
                        color: 'transparent'
                        }
            },
            curveType: 'function',
            legend: 'none'
        }


var grafico = new google.visualization.LineChart(document.getElementById('graficoLinha'));
grafico.draw(tabela, opcoes);


//grafico de colunas
var tabela = google.visualization.arrayToDataTable(
    [
        ['Mês','Entrada','Saída'],
        ['jan',2500,1000],
        ['fev',2000,500 ],
        ['mar',3000,1300],
        ['abr',1500,1700],
        ['mai',5000,2250],
        ['jun',3567,3000],
        ['jul',3452,1468],
        ['ago',1833,5250],
        ['set',3803,5500],
        ['out',1800,1000],
        ['nov',3569,1500],
        ['dez',3000,1740]

    ]);

var opcoes = {

    title: 'Entradas e saídas da conta',
    width: 800,
    height: 400,
    vAxis: {
                gridlines:{color:'transparent'},
                format: 'currency',
                title: 'Valores'
            },
    hAxis: { 
                title: 'Mês'
        }
}


var grafico = new google.visualization.ColumnChart(
            document.getElementById('graficoColuna'));
grafico.draw(tabela, opcoes);

//grafico de barras
var dadosJson = $.ajax({
    url: 'https://gist.githubusercontent.com/yurifelipe91/2f148e319418a25d8356069b43f1434d/raw/586b6a1f7f923c1abb3e6a711901b72adb70c1b1/dados.json',
    dataType: 'json',
    async: false
}).responseText

var tabela = new google.visualization.DataTable(dadosJson);

//ordenando a tabela pela coluna de indice 1
    tabela.sort([{ column: 1, desc: true }]);

    var opcoes = {
        title: 'Tipos de Gastos',
        height: 400,
        width: 800,
        vAxis: {
                gridlines: 
                { 
                    count: 0, color: 'transparent'
                }},
        legend: 'none',
        hAxis: { 
                gridlines: 
                    {
                        color: 'transparent'
                    },
                format: 'currency',
                textPosition: 'none'
                },
        annotations: 
                {
                    alwaysOutside: true
                }
    }    


    var grafico = new google.visualization.BarChart(
        document.getElementById('graficoBarras'));
    grafico.draw(tabela, opcoes);

//grafico de barras com arquivo json
    var dadosJson = $.ajax({
        //url: 'dados.json',
        url: 'https://gist.githubusercontent.com/yurifelipe91/2f148e319418a25d8356069b43f1434d/raw/586b6a1f7f923c1abb3e6a711901b72adb70c1b1/dados.json',
        dataType: 'json',
        async: false
    }).responseText;

    var tabela = new google.visualization.DataTable(dadosJson);

    tabela.sort([{ column: 1, desc: true }]);

    var opcoes = {
                title: 'Usuários e Poupanças',
                height: 400,
                width: 800,
                legend: 'none',
                hAxis: {
                    gridlines: {
                        color: 'transparent'
                    },
                    textPosition: 'none'
                },
                annotations: 
                {
                    alwaysOutside: true
                }
    }

    var grafico = new google.visualization.BarChart(
        document.getElementById('graficoBarrasJson'));    
    grafico.draw(tabela, opcoes);    

}

Fala Yuri, tudo bem?

O erro está no JSON que você está recuperando via AJAX, verifique que existem chaves finais sendo terminadas com vírgulas (dentro do array em cols), para resolver esse erro basta alterar esse JSON removendo essas duas ultimas vírgulas, feito isso seu código deverá funcionar.

Faça as alterações e veja se tudo dá certo!

obs: Irei notificar a equipe para que faça a alteração devida.

Abraços amigo!

Mano, verifiquei aqui e não tem erro com o pacote JSON

{ 
    "cols":[
                {

                    "label": "Nome",
                    "type":"string",
                },

                {    
                    "label": "Valor",
                    "type":"number",
                },

                {
                    "type": "string", 
                    "role": "annotation",
                }
            ],

    "rows":[
                {"c": [
                        { "v": "João Antônio Marques", "f": null},
                        { "v": 25.110, "f": null},
                        { "v": "R$25.110", "f": null}
                    ]
                },

                {"c": [
                        { "v": "Ana Siqueira", "f": null},
                        { "v": 10.020, "f": null},
                        { "v": "R$10.020", "f": null}
                        ]
                },

                {"c": [
                        { "v": "Alcides V. de Oliveira", "f": null},
                        { "v": 30.240, "f": null},
                        { "v": "R$30.240", "f": null}
                        ]
                },
            ]
}

cada navegador da um erro diferente:

Firefox:

 SyntaxError: JSON.parse: expected double-quoted property name at line 6 column 5 of the JSON data[Learn More]
 `

Chrome:

Uncaught (in promise) SyntaxError: Unexpected token } in JSON at position 68
    at JSON.parse (<anonymous>)
    at gvjs_Uh (jsapi_compiled_i18n_format_module__pt_br.js:214)
    at new gvjs_R (jsapi_compiled_i18n_default_module__pt_br.js:131)
    at desenharGraficos (graficos.js:128)

COMO PODE VER NO CHROME, NÃO TEM NEM LINHA 68.

solução!

Teste com esse JSON:

{ 
    "cols":[
                {

                    "label": "Nome",
                    "type":"string"
                },

                {    
                    "label": "Valor",
                    "type":"number"
                },

                {
                    "type": "string", 
                    "role": "annotation"
                }
            ],

    "rows":[
                {"c": [
                        { "v": "João Antônio Marques", "f": null},
                        { "v": 25.110, "f": null},
                        { "v": "R$25.110", "f": null}
                    ]
                },

                {"c": [
                        { "v": "Ana Siqueira", "f": null},
                        { "v": 10.020, "f": null},
                        { "v": "R$10.020", "f": null}
                        ]
                },

                {"c": [
                        { "v": "Alcides V. de Oliveira", "f": null},
                        { "v": 30.240, "f": null},
                        { "v": "R$30.240", "f": null}
                        ]
                }
            ]
}

O erro está acontecendo fora do seu código, na chamada da linha 128, devido ao JSON estar inválido.

Você pode fazer o teste criando uma nova variável e atribuindo diretamente esse JSON, e então passá-la como parâmetro para o método da linha 128.

Abraços!

Funcionou.. tmj

Fala Yuri!

Estou fechando o tópico, caso tenha uma nova dúvida basta criar um novo!

Abraços e sucesso.