CODEWITHSUNDEEP
javascriptjsonajaxjavascript-objects
Zafar
Zafar

Reputation: 321

Javascript object return as JSON

I am working on this script, where an $.ajax call, on success has to call a function, which should return a Javascript object as JSON in the format [object object], so that I can access it in success body. I am able to return a nicely formatted string, but I can't access object's properties. This is the actual body of [object object]:

{"id":"12","created_at":"2015-10-30T21:30:44.457Z", 
"card":{"id":"67","number":"89990","expires":"2018"},
"verification":"required"}

Its like an object within an object of JavaScript. first object is called employee, and nested object is called card. I can't understand what wrong I am doing. I tried to define object in literals as this:

function get_employee()
{
var employee = [];
var employee_data = '[{"id":"12","created_at":"2015-10-30T21:30:44.457Z", 
"card":[{"id":"67","number":"89990","expires":"2018"}],
"verification":"required"}]';
employee = JSON.parse(JSON.stringify(employee_data));
return employee;
}

This is how I want to access it in $.ajax call:

$.ajax {
type: "POST",
url: 'my_url/process',
//etc etc
success: function(data){
//calling my get_employee function now
params = get_employee();
//this is how I want to use the returned object as JSON
frm = $("<form action='/save/employee/database' method='POST'></form>");
frm.append("<input type='hidden' name='employee_id' value='" + params.employee.id + "'>");
frm.append("<input type='hidden' name='card_id' value='" + params.card.id+ "'>");
frm.append("<input type='hidden' name='request_id' value='" + data + "'>");
frm.submit();
}
}

But when I console.log(params.token.id) I get an error, saying params.token.id is undefined, also the same error in the form. My question is: how should I do this? What am I missing?

NOTE: when I console.log(params), it prints the plain string as I have defined in the function, but it doesn't return [object object]. When I debug in firebug, it also displays the returned response as an html string instead of JSON. My problem is I want to receive it as JSON and also access its properties as a normal javascript object.

Thanking in advance for the help!

Upvotes: 0

Views: 1705

Answers (2)

Kenney
Kenney

Reputation: 9093

Normally, you would get the JSON data from the ajax call, like this:

$.ajax( {
    type: "POST",
    url: 'my_url/process',
    dataType: 'json',                // !
    success: function(data) {        // Now, data will be an Object
        ...
    }
} )

and your server at my_url/process just returns the JSON string.

However, if you want to use your get_employee to return an object, there is no need to use JSON.parse: just use JavaScript Object Notation to declare the object:

function get_employee()
{
    return {
       employee: {
           id: 12,
           created_at: "2015-10-30T21:30:44.457Z",
           card: { id:"67", number":"89990", expires:"2018" },
           verification:"required"
       }
    };
}

Also, besides fixing various syntax errors, make sure you access the card properly:

frm.append("<input type='hidden' name='card_id' value='" + params.employee.card.id+ "'>");

Upvotes: 1

Griffith
Griffith

Reputation: 3217

Your employee_data is already a JSON string, there is no need to .stringify() it again otherwise it will escape the string again and as result the .parse() method will return you the original JSON string instead of the object you wanted.

Upvotes: 1

Related Questions