JSON call returns [object Object] or undefined

Question

Very beginner level question. Trying to learn JSON and having trouble with getting proper return data. I'm trying to use JSON to return errors from a php form using json_encode($errs, JSON_FORCE_OBJECT), but first I want to make the very simple code below work to understand JSON Objects.

I've viewed similar threads here, read the entire JSON.org documentation, looked at JQuery's $.getJSON() method and plugged in the exact code from the documentation, as well as the exact code for the JSON documentation, and I still can't seem to get a response other than "undefined" or "[object, Object]".

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!---CSS-->
    <link href="style/960.css" media="all" rel="stylesheet" type="text/css" />
    <link href="style/pubstyle.css" media="all" rel="stylesheet" type="text/css" />
    <!--- Javascript -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" 
    type="text/javascript"></script>
    <script src="javascripts/form.js" type="text/javascript"></script>
    <script src="javascripts/validate.min.js" type="text/javascript"></script>
    <script src="javascripts/json2.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
         $(document).ready(function() {
             var resp = {"message":"hi"};
         $("a#button").click(function(resp) {
           alert(resp)
         });
         });

    </script>

    <a id="button" href="#">Button</a>
    </body>
    </html>

The code above returns an alert with "[object Object]". When I change the code to:

    $(document).ready(function() {
             var resp = {"message":"hi"};
         $("a#button").click(function(resp) {
           alert(resp.message)
         });
         });

I get an "undefined" alert. I tried putting it into an array object

{ "messages": [ {"message":"hi"}]}

and calling it with

resp.messages[0].message

with no luck. I tried change the Content-Type to "application/json" and "text/plain" and neither worked. Also tried

$(document).ready(function() {  
var resp = jQuery.parseJSON('{"message":"hi"}');
$("a#button").click(function(resp) {
alert(resp.message)
});
});

Be aware that only your last snippet involves any JSON (which is a textual data format based on [and named after] the object and array notations found in Javascript). The majority of this question is about the object and array notations of Javascript syntax. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Aug 14, 2011 at 18:43
(It doesn't help that jQuery will, as part of its AJAX mechanism, deserialise JSON-format text into the proper Javascript constructs, thus further blurring the apparent "line" between the two concepts.) — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Aug 14, 2011 at 18:44
Instead of using alert to debug, use a debugger. In the case that an alert shows "[object Object]" (which is the string returned by Object.toString), a proper debugger like Firebug will allow you to see the actual structure of the object. — Matt Ball
– Matt Ball, Commented Aug 14, 2011 at 18:45

Matt Ball · Accepted Answer · 2011-08-14 18:41:02Z

4

You're confusing a couple different elements here.

Simple example, based on the last code chunk in your question:

$(document).ready(function() {  
    var resp = $.parseJSON('{"message":"hi"}');
    $('#button').click(function(event) {
        alert(resp.message);
    });
});

Your version of this code didn't work because the click callback function receives the click event object as its argument. The resp argument name in the callback shadowed the resp variable.

answered Aug 14, 2011 at 18:41

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

5 Comments

Lightness Races in Orbit Over a year ago

+1: This is the correct answer. resp is not what the OP thought it was.

nicosantangelo Over a year ago

This is correct, just wanted to add one thing that I think it could help. If you want to see what you're alerting, you can use console.log() and console.dir(), and see the result in the chrome console, firebug, etc.

Matt Ball Over a year ago

@Nico agreed. I just commented with a similar point on the OP.

thegumba Over a year ago

Thanks for the quick and accurate response. I was thinking that variables needed to be declared, then passed into the function, like PHP. So (function(resp){ alert(resp.message); }); would be analogous to public function find_by_id($id=$userid) { "SELECT * FROM table WHERE id ==".$id; }. Can you tell me where I can learn a little more about event objects vs. JSON objects vs. other JS objects? The code you provided works with an ambiguous click(function() { as well, so I'm confused as to exactly what objects need to be passed into functions to be accessible in those functions.

thegumba Over a year ago

@Matt Ball Thank you, I'll be sure to read the guide before I submit my next question. I've gotten the json objects in the same page to work, now trying the form using JQuery Form and Validation plugins. Not using the JSON object in my success callback yet. When the only option in ajaxSubmit is success: myCallbackFcn, everything works fine. When I add the dataType: 'json', option, a record inserts into MySQL db, but there's no client-side response. PHP file that handles submission has <meta http-equiv="Content-Type" content="application/json; charset=UTF-8" /> Any suggestions?

Collectives™ on Stack Overflow

JSON call returns [object Object] or undefined

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related