Link to home
Start Free TrialLog in
Avatar of josefyeung
josefyeung

asked on

Printing out JSON array returned

I have the following JSON array, successfully returned by some PHP script:

[ {"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"}]

The following js, however, fails to print out:

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

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

   }

Open in new window


But the display only showed "Undefined" instead supposedly of the post_titles, and the Console showed no errors.

This is the HTML part, just in case:
<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>

Open in new window


Any clue why? Please.
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of josefyeung
josefyeung

ASKER

I've requested that this question be closed as follows:

Accepted answer: 0 points for josefyeung's comment #a38292782
Assisted answer: 250 points for julianH's comment #a38292591
Assisted answer: 250 points for mplungjan's comment #a38292770

for the following reason:

the &lt;code&gt;jQuery.parson(data) &lt;/code&gt;<br />must be used
josefyeung, you need to click the Accept Multiple answers under the answer you want to accept - if you do it on your on it generets a close request
@josefyeung, as a matter of interest why is it necessary to call the parsJSON explicitly - which call method are you using?

$.post
$.ajax

?
@julian

I called standard admin-ajax.php, and it returned an array to my function (data) before which the array needed to be "json_encoded" in the PHP.

After being returned to js, the data then needed to be parsed in JSON form, i.e.jQuery wouldn't know  otherwise.

That's it.
Ok but I was asking how you called the .php file? did you use one of the JQuery methods?

i.e.

$.post('admin-ajax.php',{param: param, ...}, function(data) {
  // process code here
}, 'json');

While automatically parse the JSON for you as will the $.ajax sample I posted above with dataType: 'json'.

I was just wondering why you needed to do an explicit call to parseJson if you were using one of the above methods?
@julian

Hope this can help make myself clear:

$.ajax({
									
					  url: 'http://xxxxxxxx/wp-admin/admin-ajax.php',
					  
					  data:{
						   'action':'go_ajax',
						   'fn':'spw_autosuggest', 
						   'queryString': inputString
						   },  
					  
					  dataType: 'JSON',
					  
					  success:function(data){
						
								var content = '';  //this is reminded by julian
								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);
						}
			 
			}); 

Open in new window