Can't display returned JSON when using Jquery

Question

I am trying to retrieve the following json generated in my php script uing jquery. However, I am not being able to display it. If I alert it, it just displays 'undefined'. Using $('#demo').html(data.htmlOutput) to display the html doesn't do anything either. Please can someone point out what I'm doing wrong?

$arr = array('htmlOutput' => '<b>hello</b>', 'no_rows' => 'balh');
echo json_encode($arr);

$.post('get-offers.php', $("#offerForm").serialize(), function(data) {
        alert (data.htmlOutput);
        alert (data.no_rows)
        $('#demo').html(data.htmlOutput);
}

I can see the json response in the FB console,however, it still does nothing.

@gdoron - I was applying 'redirection'. I was hoping he might realize that he wasn't telling the script that it expected json and could have found the answer :) — Barry Chapman
– Barry Chapman, Commented Feb 8, 2012 at 17:23
@BarryChapman. jQuery team say in their docs they are doing Intelligent Guess by default... so it could have worked... — gdoron
– gdoron, Commented Feb 8, 2012 at 17:25

driangle · Accepted Answer · 2012-02-08 17:15:13Z

3

Tell jquery that you're expecting json, it's the last argument:

$.post('get-offers.php', $("#offerForm").serialize(), function(data) {
        alert (data.htmlOutput);
        alert (data.no_rows)
        $('#demo').html(data.htmlOutput);
}, "json");

answered Feb 8, 2012 at 17:15

driangle

11.8k6 gold badges50 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gdoron · Accepted Answer · 2012-02-08 17:22:11Z

2

You Have tell jquery you are expecting json object, do it with the dataType as follows:

.post('get-offers.php', $("#offerForm").serialize(), function(data) {
        alert (data.htmlOutput);
        alert (data.no_rows)
        $('#demo').html(data.htmlOutput);
},'json'); //<====

dataType: The type of data expected from the server.

docs

I would think jquery will be able to guess it is a json object, because in their docs written:

Default: Intelligent Guess (xml, json, script, text, html).

Well, I guess that that guess isn't that Intelligent... =)

edited Feb 8, 2012 at 17:22

answered Feb 8, 2012 at 17:14

gdoron

151k59 gold badges302 silver badges376 bronze badges

Comments

gdoron · Accepted Answer · 2012-02-08 17:26:38Z

0

Two options:

First, set 'json' as the last parameter of you $.post to tell it that it is expecting a JSON response.

Second, before your first alert, add this:

var obj = jQuery.parseJSON(data);

Then alert(obj.htmlOutput);

See if that works for you

edited Feb 8, 2012 at 17:26

gdoron

151k59 gold badges302 silver badges376 bronze badges

answered Feb 8, 2012 at 17:15

Barry Chapman

6,7904 gold badges40 silver badges71 bronze badges

Collectives™ on Stack Overflow

Can't display returned JSON when using Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related