Stumped by JQuery $.each behavior - php

Question

I have a php file which when called returns a simple non associative array of string values. When I request the array using the jQuery get routine I get the array I expect, but when I try to iterate it , instead of getting the two string values, the $.each command iterates every char. I don't understand what I'm getting wrong.
My code:
<div name ="test_spot" id ="test_spot" width="200" height="400">Test</div>
<script type="text/javascript">
function getOutput(){
$.get( "data.php", function( data ) {
// This call verifies the the array is what I would expect.
// ["one","two"]. Then I comment this out and run the code below.
//$( "#test_spot" ).html( data);
$.each(data, function(index, value){
// This outputs each char instead of each string each on its own line in the div.
// [
// "
// o
// n
// e etc
$('#test_spot').append($('<p>').text(value));
});
});
}
</script>
<button onClick="getOutput()" style="height: 60px; width:100px;" >Test</button>
Thanks for the help.

Answer 1

You are expecting an object but are getting back a JSON string. When you pass that to .each it iterates over the characters in the string.
Try specifying the dataType as json like this:
$.get( "data.php", function( data ) {
$.each(data, function(index, value){
$('#test_spot').append($('<p>').text(value));
});
}, "json" );
Or, like charlietfl points out, simply use
$.getJSON( "data. php", function( data ) {
$.each(data, function(index, value){
$('#test_spot').append($('<p>').text(value));
});
});
If that still doesnt work, Id look at the output and make sure that it is valid JSON.