Cannot read JSON object returned from PHP

Question

I am sending a JSON object to a PHP file, The PHP does some manipulation and returns a JSON string:

$('button#indexOpener').on('click', function() {
    var aUsername = $('input#edUsername').val();    
    var aPassword = $('input#edPassword').val();

    if (($.trim(aUsername) != '') && ($.trim(aPassword) != '')) {
        var str = $("#form_login :input").serializeArray();
        $.post("<?php echo URL; ?>ajax/checklogin", str, function(data) {
            alert(data.edUsername); 
        }); 
    }
    else {
        alert('Please insert a valid username and password');
        alert("<?php echo URL; ?>/ajax");   
    }
});

the PHP echoes a JSON object:

echo json_encode($_POST);

but when I try to alert the data with jQuery:

function(data) {
  alert(data.edUsername);   
}

is displaying the message undefined. I am sure it is something stupid but I cannot see what I am doing wrong, can you help?

Have you checked the console, whether the data is actually returned? Also: Any errors on either client or server side? — Sirko
– Sirko, Commented Feb 5, 2013 at 10:39
$("#form_login :input").serializeArray(); Doesn't it should be like this: $("#form_login").serializeArray(); — Jai
– Jai, Commented Feb 5, 2013 at 10:42
The console does not show any error. If I just alert(data) is returning {"edUsername":"qqq" "edPassword":"qqq"} but if I alert alert(data.edUsername); I get "undefined"? It is like the return object is not a JSON object but I am using echo json_encode($_POST); in my php? — user1536396
– user1536396, Commented Feb 5, 2013 at 10:53

MC Emperor · Accepted Answer · 2013-02-05 11:21:13Z

3

I see no dataType set for $.post(). jQuery will try to recognize returned content type, but you need to set correct headers. So, you need to add:

header("Content-Type: application/json");

before echo json_encode, or you should set dataType:"json" in JS code (fourth parameter of $.post()):

$.post("<?php echo URL; ?>ajax/checklogin", str, function(data) {
    alert(data.edUsername); 
}, "json");

This way, jQuery will know that the data returned is in JSON format and should be parsed. Without it, jQuery will check the Content-Type header and apply parser according to it. Suppose if no custom content type headers set, it will return return data as HTML. Actually, that is a usual string.

If I just alert(data) is returning {"edUsername":"qqq" "edPassword":"qqq"} but if I alert alert(data.edUsername); I get "undefined"?

JSON is a regular string which should be parsed on client side. jQuery detects your response as plain text or HTML and does not parse JSON to Javascript object. In case of data being an object, you would get [object Object] in alert window.

edited Feb 5, 2013 at 11:21

MC Emperor

23.3k16 gold badges90 silver badges138 bronze badges

answered Feb 5, 2013 at 10:56

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

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

3 Comments

user1536396 Over a year ago

I have tried what you suggested but it did not work. Thank you for replying though.

Viktor S. Over a year ago

Please note that I made a mistake in header code initially. But now it is updated. Once you are getting json string in data, than the only problem is that jquery does not convert it to object. dataType:"json" and content-type header should fix that.

user1536396 Over a year ago

Sorry I misstyped the header, your solution works. Thank you everybody for your help

Jai · Accepted Answer · 2013-02-05 11:01:01Z

0

I think this should be this way using $.getJSON():

var str = $("#form_login").serialize();

$.getJSON("<?php echo URL; ?>ajax/checklogin", {data:str}, function(data){
     alert(data.edUsername); 
});

answered Feb 5, 2013 at 11:01

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Cannot read JSON object returned from PHP

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related