After making an ajax request using a form, I receive a JSON response stored in a variable called response. The structure of the response is as follows:
{
data: {
attributes:{
//list of key-values
}
id: null,
type: "job"
},
links: {
modal: "/client/render/modals/job/success"
},
message: "job successfully created",
success: "ActionSuccess"
}
However, when trying to access response.links.modal or response['links']['modal'], I encounter the following error:
Uncaught TypeError: Cannot read property 'modal' of undefinedI find it confusing that the program does not recognize the existence of 'links', even though I can clearly see it in the JSON response preview (using Chrome).
EDIT:
The code responsible for the ajax request:
function submit_form(request, method, data, type, target) {
switch(type){
case 'modal':
$('#' + target).openModal();
break;
case 'target':
break;
case 'page':
break
}
$.ajax({
url: request,
type: method,
data: data,
success: function(response){
submit_callback(response, type, target)
}
})
}
Callback function:
function submit_callback(response, type, target) {
switch(type){
case 'modal':
console.log(response) //shows that links exists
console.log(response.links) //logs out as undefined
post_page(response.links.modal, response.message, target)
break;
case 'target':
change_target(response, target);
setUpPageElements();
break
case 'page':
('body').html(response)
break;
}
}
EDIT:
Here is the response after applying JSON.stringify on it:
"{\"message\":\"job successfully created\",\"success\":\"ActionSuccess\",\"data\":{\"attributes\":\"//list of key-values\"},\"type\":\"job\",\"id\":null},\"links\":{\"modal\":\"/client/render/modals/job/success\"}}"
Just to clarify, the attributes exist but are irrelevant to this issue so I have omitted them (they don't actually contain \"//list of key-values\").