Parsing JSON string which sent as AJAX response from PHP file - php

Question

I am trying to parse the JSON string sent as ajax response from PHP file using jQuery / JavaScript.
Ajax call:
<script>
$(document).ready(function(){
var query = $("#editor").html().replace(/(<([^>]+)>)/ig,"");
$.ajax({
type: "POST",
url: "app/query_db.php",
data: "q="+query,
success: function(resp){
if(resp) {
alert("Response : "+resp);
$("#res_data").html(resp);
}
else{
alert("Response: Failed")
}
});
return false;
});
});
</script>
PHP file :
$db_conn = new db_connect();
$conn = $db_conn->connectToDB($DBHost,$DBName,$DBUser,$DBPwd);
$query_res = array();
if (fill_numeric_array_with_query_assoc($query_res, $sql_query, $conn)) { // Function to execute the query and fill the result
//do nothing
} else {
echo("Error description: " . mysqli_error($conn)); // Error message to display if failed to fetch the data
exit();
}
$data = json_encode($query_res);
echo $data;
Result: [{"uid":"admin","pwd":"xyz"},{"uid":"guest","pwd":"abc"}]
Whenever I try to parse the above JSON string I am ending up with 0 and 1 as keys and the other stuff as values. The strange thing is when I copy this result and assign it to a variable in JavaScript it's parsing the string correctly.
Don't know what's going wrong when trying to parse it as AJAX response.
Table format when parsed the JSON string as AJAX response:
Response when assigned to variable in javascript :
uid pwd
admin xyz
guest abc

Answer 1

This will take the data and turn each object into a row in a table. I'm going to assume that #res_data is an empty <table> element.
$.ajax({
type: "POST",
url: "app/query_db.php",
data: "q=" + query,
dataType: "json",
success: function(resp) {
if (resp) {
alert("Response : " + resp);
$("#res_data").empty();
if (resp.length > 0) {
var header = "<tr>";
for (var key in resp[0]) {
"<th>" + key + "</th>";
}
header += "</tr>";
$("#res_data").append(header);
var rows = "";
for (var i=0; i< resp.length;i++) {
rows += "<tr><td>" + resp[i].uid + "</td><td>" + resp[i].pwd + "</td></tr>";
}
$("#res_data").append(rows);
}
else { alert("No data returned"); }
} else {
alert("Response: Failed")
}
}
});
Note the extra ajax option: dataType: "json". This is important. Because your PHP doesn't send any header to tell the client to interpret the response as JSON, it likely interprets it as text. So you have to add dataType:"json" so jQuery knows what to do, and makes the response directly into a JS object. Then you should have no problem. If you don't, then it will see it as a string, and then loop through it one character at a time, which will result in the strange output you showed in the question.