Decode Json Response from Ajax Call

Question

I am getting a json response from python script via a ajax call on my html page, which I am running on localhost. When I alert /display the response it is in proper ajax format but I don't know how to decode it. JSON parse display [object] [object] . Any help? Thanks in advance.

HTML:

function getData() {
    // Code doesn't even enter this function but when i remove the $.ajax part it enters the function
    alert("I AM HERE");

    $.ajax({
        type: "GET",
        datatype: 'json',
        url: "/cgi-bin/check.py",
        data: {
            action: 'muawia()',
        },
        success: function(data) {
            alert(data);
        },
        error: function(data) {
            alert(data.responseText);
        }
    });
};

Python:

#!/usr/bin/python

import cgi, cgitb 
from StringIO import StringIO
import json

class myclass:
    def __init__(self):
            self.data = []


    def muawia(self):
        content=json.loads('{"access": {"token": {"issued_at": "2013-04-18T14:40:23.299903", "expires": "2013-04-19T14:40:23Z", "id": "4c5ef01f52c7404fb5324c520d25d1fe", "tenant": {"description": "admin tenant", "enabled": true, "id": "51ad87714b86442d9a74537d6f890060", "name": "admin"}}, "serviceCatalog": [{"endpoints": [{"adminURL": "http://10.199.0.250:8774/v2/51ad87714b86442d9a74537d6f890060", "region": "RegionOne", "internalURL": "http://10.199.0.250:8774/v2/51ad87714b86442d9a74537d6f890060", "id": "9869f55f0de2490685676b6ec27f6097", "publicURL": "http://10.199.0.250:8774/v2/51ad87714b86442d9a74537d6f890060"}], "endpoints_links": [], "type": "compute", "name": "nova"}, {"endpoints": [{"adminURL": "http://10.199.0.250:8080", "region": "RegionOne", "internalURL": "http://10.199.0.250:8080", "id": "321601d827ba4bbbb6de1df69fd43a1c", "publicURL": "http://10.199.0.250:8080"}], "endpoints_links": [], "type": "s3", "name": "swift_s3"}, {"endpoints": [{"adminURL": "http://10.199.0.250:9292", "region": "RegionOne", "internalURL": "http://10.199.0.250:9292", "id": "cca7d7a24dbe45b6ae08da2c023b0d82", "publicURL": "http://10.199.0.250:9292"}], "endpoints_links": [], "type": "image", "name": "glance"}, {"endpoints": [{"adminURL": "http://10.199.0.250:8776/v1/51ad87714b86442d9a74537d6f890060", "region": "RegionOne", "internalURL": "http://10.199.0.250:8776/v1/51ad87714b86442d9a74537d6f890060", "id": "14773153229d4e7f80e47cf7b1dd2d15", "publicURL": "http://10.199.0.250:8776/v1/51ad87714b86442d9a74537d6f890060"}], "endpoints_links": [], "type": "volume", "name": "cinder"}, {"endpoints": [{"adminURL": "http://10.199.0.250:8773/services/Admin", "region": "RegionOne", "internalURL": "http://10.199.0.250:8773/services/Cloud", "id": "064df72a67f54dffa68c07b8fc400bdb", "publicURL": "http://10.199.0.250:8773/services/Cloud"}], "endpoints_links": [], "type": "ec2", "name": "nova_ec2"}, {"endpoints": [{"adminURL": "http://10.199.0.250:8080/", "region": "RegionOne", "internalURL": "http://10.199.0.250:8080/v1/AUTH_51ad87714b86442d9a74537d6f890060", "id": "194df182a8c043e48175a40fb615064e", "publicURL": "http://10.199.0.250:8080/v1/AUTH_51ad87714b86442d9a74537d6f890060"}], "endpoints_links": [], "type": "object-store", "name": "swift"}, {"endpoints": [{"adminURL": "http://10.199.0.250:35357/v2.0", "region": "RegionOne", "internalURL": "http://10.199.0.250:5000/v2.0", "id": "34db74b5f32f4121932725b1146a1701", "publicURL": "http://10.199.0.250:5000/v2.0"}], "endpoints_links": [], "type": "identity", "name": "keystone"}], "user": {"username": "admin", "roles_links": [], "id": "b5902682120742baa150945d8a37ff47", "roles": [{"name": "admin"}], "name": "admin"}, "metadata": {"is_admin": 0, "roles": ["9aa2eb385f4e4a8e80ad5002c212e76b"]}}}')
        data=json.dumps(content, indent=4, separators = (', ', ': '))
        print data
        return

print "Content-Type: text/html\n"
x = myclass()
x.muawia()

Answer 1

You should use

console.log(data)

rather than alert(data). Alert will only show you strings

Answer 2

alert() only outputs strings. So generally it would be the same as:

data = data.toString();
alert(data);

Use console.log or console.dir in combination with JSON.parse to show the actual object that is returned from the JSON.parse.

// In your $.ajax success method
var someVar = JSON.parse(data);
console.log(someVar);

You can also set it to a global variable temporarily to debug it via the Firebug/Chrome DevTools console by typing its name. For example:

// In your $.ajax success method
window.data = data;

And then type "data" in your console.

Please note that this is a bad practice to ship to production, global variables cannot be garbage collected by your browsers JavaScript engine and especially a global variable name as data has a high possibility of turning into a conflict with other global variables. If you still want to use a global for some reason then make sure you use a solid naming convention to prevent error.

Answer 3

You can use $.parseJSON to format your data correctly. You may also want to remove the extra comma at the end of your error response function. It can cause syntax errors. Remove the comma from "action: 'muawia()'," as well.

success: function(data){
    r = $.parseJSON(data)
    alert(r.responseText);
},
error: function(data){
    r = $.parseJSON(data)
    alert(r.responseText);
}

Hope this helps!

Answer 4

That's absolutely normal as JSON.parse(stringData) create s normal JavaScript object, so you get the [object Object] in the alert. You have to access each object's property to get its value. In your case var jsonObj = JSON.parse(data); alert(jsonObj.access.token.issued_at); var jsonObj = JSON.parse(data); alert(jsonObj.access.token.issued_at);

will be for instance "2013-04-18T14:40:23.299903"