Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question

closed as too localized by toscho Nov 24 '12 at 17:12

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

add comment

3 Answers

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).

share|improve this answer
add comment
up vote 0 down vote accepted
$.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);
                    }

        });  
share|improve this answer
    
@syslogic, thank you for taking the time. I paste in the above the entire snippet of Ajax I have used all along. While you've probably got a point on the "parseJSON" being useless, I got null errors when it was left out. I'm still pondering on the issue. –  Josef Young Aug 18 '12 at 10:37
    
The puzzle solved. I have tested and tested. I found this: there is absolutely no need for parsing data passed by Ajax, except that there is a conflict between the client-side jQuery and the server-side jQuery versions! –  Josef Young Aug 19 '12 at 17:00
add comment
  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");
}
share|improve this answer
    
Thanks. Have tried your suggestions, but the problem persisted. –  Josef Young Aug 14 '12 at 15:32
    
Although the #2 must have been right. –  Josef Young Aug 14 '12 at 15:33
    
Sorry, retried and got it work. –  Josef Young Aug 14 '12 at 15:41
    
You got it right except that my ftp server was being down. Sorry and thanks!!! –  Josef Young Aug 14 '12 at 15:42
    
Erm ... jQuery.parseJSON(data) is pretty useless - because variable "data" already should be a JS object in the callback of the jQuery.ajax function... this would only apply if it's a JSON-string. I rather assume you send out the JSON without or with wrong HTTP headers. –  syslogic Aug 17 '12 at 21:50
show 1 more comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.