Printing out JSON array returned [closed]

Question

I have the following JSON array:

[{"occurences":"1","post_title":"Test 1","ID":"16"},    
 {"occurences":"1","post_title":"Test 2","ID":"19"},
 {"occurences":"1","post_title":"\u543b\u60a8\u7684\u5c41\u80a1","ID":"21"}] 

And I use this js to parse and print it:

success:function(data){
     $.each(data, function(i, post){
     content = '';
     content += '<li>' + post.post_title + '</li>';
   });

   $(content).appendTo("#search-results");

   }

But the display only showed "Undefined", and the Console showed no errors.

In case you ask, this is the HTML part:

<form id="search" action="">
<div class="toolbar">
    <h1>Search</h1>
    <a href="#" class="back">Back</a>
</div>
<ul class="rounded">
    <li><input type="text" name="search-text" placeholder="Search" id="search-text" /></li>
</ul>
<ul class="edgetoedge" id="search-results">
    <li class="sep">Results</li>                
</ul>
</form>

Any clue why? Many thanks in advance!

Answer 1

Setting the proper dataType for the request is an important detail not considered in the answer above (this causes jQuery to send a HTTP Accept header with the request - and it will be expecting JSON data in the success callback as well):

dataType: 'json',
success:function(json){
   var content = '';
   jQuery.each(json, function(i, v){
      content += '<li>' + v.post_title + '</li>';
   });
   /* like this the results won't cummulate */
   jQuery("#search-results").html(content);
}

And sending the proper HTTP header with the response was also not considered:

header("content-type: application/json; charset=utf8");

Internet Exploder doesn't like that header - but this is another story (read more).

Answer 2

$.ajax({

                  url: 'http://mypath/wp-admin/admin-ajax.php',

                  data:{
                       'action':'go_ajax',
                       'fn':'spw_autosuggest',  
                       'queryString': $.trim(inputString.val())
                       },  

                  dataType: 'JSON',

                  success:function(data){
                            // this part is what happens with the JSON data

                            //console.log(data);

                            var content = '';
                            var data = $.parseJSON(data);

                            $.each(data, function(i, post) {
                                content += '<li>' + post.post_title + '</li>';
                            });

                            $(content).appendTo("#search-results");
                    },

                    error: function(errorThrown){
                       alert('error');
                       console.log(errorThrown);
                    }

        });  

Answer 3

1. Add var json = jQuery.parseJSON(data);
2. Define content by adding var content
3. Place content = ''; before the each-loop

Like this:

function (data) {
    var content = '';
    var json = jQuery.parseJSON(data);

    $.each(json, function(i, post) {
        content += '<li>' + post.post_title + '</li>';
    });

    $(content).appendTo("#search-results");
}