Javascript object return as JSON

Question

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!

Answer 1

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+ "'>");

Answer 2

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.

• Zafar: Hi @Kenney thank you for explaining this. I am going your way and trying to test it. However, it gives me a syntax error inside the object literals at created_at: time_stamp field. Please note that time_stamp is a variable which contains current time and date. I am sure its allowed to pass variables as values of the keys. whats wrong here?
• Zafar: Hi @Griffith Thanks for this. You are right that its already a JSON. Now, if I don't json.prase it, i get an error when I used the variable as a value of the key in object literals. this way: employee: { id: id, created_at: time_stamp } am I doing something wrong?
• Zafar: Thank you so much both you guys. This really worked :)