Unexplained Error, Uncaught Syntaxerror: Unexpected end of JSON input

Asked

Viewed 2,200 times

0

I’m making a chart and I’m using Chart.js, PHP and jQuery. I managed to run with the correct information, but after a while it stops working and presents the following error:

Uncaught SyntaxError: Unexpected end of JSON input
     at JSON.parse (<anonymous>)

My index.php:

<!doctype html>
<html lang="pt-br">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Idade</title>
  </head>
  <body > 


    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="chart-container" style="position: relative; height:40vh; width:80vw">
                    <canvas id="graficoIdade"></canvas>
                </div>
            </div>
        </div>
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="js/graficoIdade.js"></script>
  </body>
</html>

My JS:

$(document).ready(function(){
  $.post({
    url:"graficos/gerarGraficoIdade.php",
    method: "POST",
    cache: false,
    success: function(idades){

        console.log(idades)

        var nome = [];
        var idade = [];


        $.each(JSON.parse(idades), function(idx, obj){
            nome.push([obj.nome]);
            idade.push(obj.idade);
        });

        var ctx = document.getElementById("graficoIdade").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: nome,
                datasets: [{
                    label: 'Idades',
                    data: idade,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {

            }
        });
    },
    error: function() {

    }
 })
});

My PHP:

<?php 

$conn = mysqli_connect(minhaconexao);

if (!$conn) {
    die("Connection failed: " . $conn->error);
}

$idades = array();

$query = "meu select";

$result = mysqli_query($conn, $query);

while($idade = mysqli_fetch_assoc($result)){
    array_push($idades, $idade);
}

mysqli_close($conn);


echo json_encode($idades);

Impressive, because it works normally and simple from scratch it stops working.

php javascript jquery chartjs php-7

  • Guys, investigating here discovered the source of the error, there is a determining name that was written in the database with accent, and when loaded this name happens the error.

  • I found a lot of problems in your JSON, I believe they are the cause of the error. Glue it to this site for you to see: https://www.jslint.com/

  • I’ll test it here, obg!

  • you can exchange this loop in php for a simple $idades = mysqli_fetch_all($result, MYSQLI_ASSOC);

No answers

Browser other questions tagged php javascript jquery chartjs php-7

You are not signed in. Login or sign up in order to post.