被JQuery $ .each行为困扰

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.