Can anyone please tell me how I can access this JSON data with JavaScript? I tried it wit the $.each loop, tried accessing with [0] but everything returned undefined.
JSON data from controller:
{
"workers": {
"107": "Lisa",
"96": "Marvin",
"24": "Michael",
"23": "Patrick",
"116": "Peter"
}
}
Ajax Call:
$.ajax({
url: '/cake/workers/getWorkersAsJSON.json',
async: true,
success: function(data) {
// process
}
});
You need to add dataType: 'json'
$.ajax({
url: '/cake/workers/getWorkersAsJSON.json',
async: true,
dataType: 'json',
success: function(data) {
$.each(data.workers, function(i, v) {
console.log(i + ' : ' + v);
})
}
});
Specifying the datatype as JSON will then convert it to a JavaScript object and you can iterate through it with $.each or call out items directly by using a . as a separator. The example above works.
FYI: you don't need to specify async: true because it's true by default.
There's actually a jQuery short-hand of the $.ajax datatype:json. The function is called getJSON
In your example, it would be implemented like this:
$.getJSON( "/cake/workers/getWorkersAsJSON.json", function( data ) {
console.log(data);
});
That would get the JSON, and the proceed to log the retrieved data as an array into Console.
Hi please check the below code. You are sending object so have to access data using keys.
$.ajax({
url: '/cake/workers/getWorkersAsJSON.json',
async: true,
success: function(data) {
console.log(data.workers.107) // should show "Lisa"
//if you need to use loop, try these
var keys = Object.keys(data.workers);
for(var key in keys){
console.log(data.workers[key]);
}
}
});
undefined in the console.Try
var obj = $.parseJSON(data);
in your success function.
It doesn't looks like an array so not sure it could be processed with 'each' loop (please see JSON array definition here). Most probably it would be accessible as
data.workers.107
If not simplest way to understand structure is to set breakpoint in ajax callback and check structure of JavaScript object.
Using the open source project jinqJs
You could make a sync call like this to get the JSON object:
var result = jinqJs().from('/cake/workers/getWorkersAsJSON.json').select();
an async way to access it:
var result;
jinqJs().from('/cake/workers/getWorkersAsJSON.json', function(self) {
result = self.select();
});
