jQuery/PHP ajaxForm getting JSON encoded results - php

Question

I got this code for the Form:
jQuery
$('#form').ajaxForm({
beforeSend: function () {
bar.width(0);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentCompleted = percentComplete + '%';
bar.width(percentCompleted)
bar.text(percentCompleted)
console.log(percentCompleted);
///The Console logs properly.
},
complete:
//------------------------------------
//THIS IS WHERE LIES PROBLEM IS
//------------------------------------
function (xhr) {
//How do you convert the xhr to JSON?
//I tried :
var out = JSON.parse(xhr)
// and :
var out2 = $.parseJSON(xhr)
console.log('Completed1: ' + out);
console.log('Completed2: ' + out2);
},
error: function (xhr, desc, err) {
console.log(xhr)
console.debug(xhr);
console.log("Desc: " + desc + "\nErr:" + err);
}
});
The PHP is like:
$OutCollection is an Associative Array()
Firebug Console says:
Cant figure out what's really Wrong.
Any help is highly appreciated.
PHP output / response in firebug
Console.log(xhr) prints

Answer 1

It seems that xhf is a XMLHttpRequest object so the responseText property will have your json.
function (xhr) {
//How do you convert the xhr to JSON?
//I tried :
var out = JSON.parse(xhr.responseText)
// and :
var out2 = $.parseJSON(xhr.responseText)
console.log('Completed1: ', out);
console.log('Completed2: ', out2);
},

Answer 2

Solved the mystery:
Using the hint from #Musa in the comment that suggested to try the console.log(xhr),
I came up with this.
var out=$.parseJSON(xhr.responseText);
$.each(out,function(i,v){
//then:
console.log(out[i]) //to access each piece of the information.
});
However,
Somehow, both parameters of the $.each() are returning the key of the key=value pair. I somehow thought the i should be the index and the v, value of the $.each loop. So that we could do something like: v[i]. using i as an index to access the values stored in the v Array of values.
Even though, it works hackingly however.

Answer 3

I think you dont have that ; after that variable declaration like:
var out= JSON.parse(xhr);
var out2= $.parseJSON(xhr);

Answer 4

The problem here is HTTP header
We need to make the browser think the receiving data is json and then you don't need to parse the returning string to json.
Just need to add this before you echo the json encoded string:
header("Content-type: application/json");