CODEWITHSUNDEEP
javascriptjqueryjsonparsing
thegumba
thegumba

Reputation: 61

JSON call returns [object Object] or undefined

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)
});
});

Upvotes: 0

Views: 3265

Answers (1)

Matt Ball
Matt Ball

Reputation: 359856

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.

Upvotes: 4

Related Questions