How to accept JSON via AJAX and turn it into a Javascript array?

[galvin]

I'm sorry but I am reading all over the internet how EASY it is to use JSON to convert a PHP array to a Javascript array, but I cannot get it to work for the life of me.

 

I'm using AJAX and sending and array back from my PHP page using...

echo json_encode($_SESSION['answers']);

 

Back on my main page, I "retrieve" this info using ...

var answers = xmlHttp.responseText;

 

But I can't figure out where to go from here?  I just want the "answers" javascript variable to be an array with the same items in it as the original "$_SESSION['answers']" PHP array had.

 

I am relatively new to programming but when I google things that are universally considered to be "easy," I usually can figure them out for myself.  But this one is kicking my a*s up and down the street.

 

Can anyone help, or point me in some sort of direction?  I'll take any direction at all at this point, as long as it gets me closer  

[trq]

You don't want to convert json to a javascript array. it is already a simple javascript object.

 

Given this json....

 

var json = {"id":12,"name":"foo"}

 

You can access it easily using....

 

var json = {"id":12,"name":"foo"};
console.log(json.id);

[trq]

Just to reiterate. Lets say your var answers, is a json object that looks like.....

 

var answers = {"q1": "Pigs that fly", "q2": "Because", "q3": "Why not"};

 

You can access easily them via....

 

console.log(answers.q1);
console.log(answers.q2);
console.log(answers.q3);

 

If you want to loop through them, use....

 

for (var answer in answers) {
    console.log(answers[answer]);
}

[galvin]

Ok thank you.  So if I have...

 

var answers = xmlHttp.responseText;
		for (var answer in answers) {
			console.log(answers[answer]);
		}
		}

 

How would I display each of those things so I can make sure they are coming over correctly?

 

I assume I use document.getElementById('answers').innerHTML =  (((something)))

 

I have a div with an ID of "answers" but everything I've tried in place of (((something))) shows "undefined" in that div.

 

Actually, maybe the better question is how can I see everything that's in my JSON object immediately after I get it back from the AJAX call?  I think once I can see exactly what the JSON object consists of, I can work backwards using your examples.

 

And one other question (don't laugh).  Isn't console.log() only used with Firefox debugging?  Is it something that can be regularly used in actual code?

 

[trq]

How would I display each of those things so I can make sure they are coming over correctly?

 

I assume I use document.getElementById('answers').innerHTML =  (((something)))

 

You'll likely want to form some markup and use that. eg

 

var tmp = '';
for (var question in answers) {
  tmp += '<div>';
  tmp += '  <span class="question'> + question + '</span>';
  tmp += '  <span class="answer'> + answer[question] + '</span>';
  tmp += '</div>';
}

document.getElementById('answers').innerHTML = tmp;

 

Actually, maybe the better question is how can I see everything that's in my JSON object immediately after I get it back from the AJAX call?  I think once I can see exactly what the JSON object consists of, I can work backwards using your examples.

 

And one other question (don't laugh).  Isn't console.log() only used with Firefox debugging?  Is it something that can be regularly used in actual code?

 

I'll kill two birds here. yes, console.log() is used for debugging via firebug. It's also a good thing to use in examples posted on forums IMO, because people will be outputting things in different way, I was just pointing out how you access data within json objects.

 

As for how you can see your json data? Take  look at it in console.log().