Tell me where I made a mistake, that I get an error: "Now the error is: Uncaught SyntaxError: Unexpected token o in JSON at position 1"

Here is a piece of code where the problem is:

$(function () { $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", dataType: 'json', url: '/Chart/GetVotings', }).data (function (votings) { votings = $.parseJSON(votings); $: each(votings, function (index, data) { chartData.labels.push(data.name); chartData.datasets[0].data.push(data.voice); }); }); });

Here is the whole code:

 <canvas id="ChartVote" width="300" height="200"></canvas> <script type="text/javascript" charset="utf-8"> $(function () { $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", dataType: 'json', url: '/Chart/GetVotings', }).done(function (votings) { console.log(votings); votings = $.parseJSON(votings); $: each(votings, function (index, data) { chartData.labels.push(data.name); chartData.datasets[0].data.push(data.voice); }); }); }); var ctx = document.getElementById("ChartVote"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: [], datasets: [{ label: '# of Votes', data: [], 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: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); </script>
  • In the string votings = $.parseJSON(votings); ? Add console.log(votings); before this line and insert what is displayed in the console, in your question. - Igor
  • Uncaught TypeError: $ .ajax (...). Data is not a function, changed the string .data (function (votings) to .done (function (votings), as in the example that I found. Even the data partially started to load, but still not displayed in the graph and the error again became "Now the error is: Uncaught SyntaxError: Unexpected token o in JSON at position 1" - Macro
  • in which line does the error occur? - Igor
  • That's just the problem and that indicates 1 line)) - Macro
  • not for a line, but for a position - the text (data) of the response that the code tries to process as JSON is meant - show already what you are returning from ChartController.GetVotings . - Igor

1 answer 1

Here is the solution, although it’s not a full-fledged yet, we still need to make it to display only the unique Name and display the results of the Voice for each Name.

In the meantime, here's a working version:

  <canvas id="ChartVote" class="ChartVotings" width="300" height="200"></canvas> <script type="text/javascript" charset="utf-8"> $(function () { $.ajax({ type: "GET", url: '@Url.Action("GetVotings","Chart")', }).done(function (votings) { var labelsArray = []; var dataArray = []; $.each(votings, function (index, data) { labelsArray.push(data.Name); dataArray.push(data.Voice); }); renderChart(labelsArray, dataArray); }); }); function renderChart(labels, voice) { var ctx = document.getElementById("ChartVote"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [{ label: '# of Votes', data: voice, 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: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); } </script>