Chart.js, PHP and JSON loop issue - php

Question

I am trying to create a dashboard that will show some data from a database. Right now I am using a separate JSON encoded file named "data.php". I am using a jQuery Ajax request for this data to populate a Chart.js chart.
I have also been following an example similar to this
At the moment I am running into an issue seen here on my app.js file:
$(document).ready(function(){
$.ajax({
url: "http://{redacted ip}/swordtest/data.php",
method: "GET",
success: function(data) {
//var myData = $.parseJSON(data);
console.log(data);
var teamid = [];
var teamName = [];
var ticketCount = [];
for (var i in data) {
teamid.push("ID " + data[i].id);
teamName.push(data[i].name);
ticketCount.push(data[i].count);
}
console.log(data);
var chartData = {
lables: teamName,
datasets: [
{
label : 'Teams',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 0.75, 1)',
hoverborderColor: 'rgba(200, 200, 200, 0.75, 1)',
data: ticketCount
}
]
};
var ctx = $("#mycanvas");
var myDoughnutChart = new Chart(ctx, {
type: 'bar',
data: chartData
});
},
error: function(data) {
console.log(data);
}
});
});
What is happening though is that when I try to loop through the JSON object to separate the id's, names of the teams and amount of tickets, it will loop through the id continuously and give me this:
teamid = (1) ["ID undefined", "ID undefined"]
It will also add one and keep saying undefined. When I put breakpoints in the code it seems to only loop through the id as well. Any sort of help would be greatly appreciated. Thank you!
UPDATE
one thing to mention is that the data that I am getting from my data.php is a little different looking than the example I am working from (the link mentioned above). when I print the data it comes in this format:
data = "{"playerid":"1","score":"10"},{ "playerid":"2","score":"40"},{ "playerid":"3","score":"20"},{ "playerid":"4","score":"9"},{ "playerid":"5","score":"20"}"
Where in the example it looks like:
[{"playerid":"1","score":"10"},{ "playerid":"2","score":"40"},{ "playerid":"3","score":"20"},{ "playerid":"4","score":"9"},{ "playerid":"5","score":"20"}]
Different with brackets and without. I had a friend just try taking out the double quotes, replacing them with single quotes and wrapping the whole JSON in brackets. It seemed to start working then. I am guessing it has something to do with the way the JSON is getting formatted in my data.php.

Answer 1

Try to add the dataType property to the object literal that is the argument of the ajax() function. As you are getting a JSON from PHP, the property should have "json" as its value.
$.ajax({
url: "test.php",
method: "GET",
dataType: "json",
success: function(data) {
// ...
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("AJAX ERROR",textStatus,errorThrown,jqXHR);
}
});
I tested with this PHP file.
test.php
<?php
echo '[{"id":"1", "name":"John Doe", "count":"7"},{"id":"2", "name":"ABC", "count":"5"},{"id":"3", "name":"XYZ", "count":"29"}]';
?>