Nested JSON data and the dataSrc property
Nested JSON data and the dataSrc property
remiego
Posts: 19Questions: 2Answers: 0
I have a requirement to consume some JSON in the following shape:
{
"responseList": [{
"eventList": [{
"eventId": "1",
"eventInfo": "first",
"attributes": {
"status": "OPEN",
"severity": "HIGH",
}
}, {
"eventId": "2",
"eventInfo": "second",
"attributes": {
"status": "CLOSED",
"severity": "LOW",
}
}
}]
}
I'm not sure how to setup the dataSrc attribute to point to the evenList range. I've tried "eventList", "responseList.eventList" and in columns having:
"columns":[
{"data":"responseList.eventList.eventId"}
]
I'm not currently getting any errors but I'm failing to bind the data, my html has been stripped back to contain a single column to try and get it to work.
<table id="eventData" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>EventId</th>
</tr>
</thead>
<tfoot>
<tr>
<th>EventId</th>
</tr>
</tfoot>
</table>
Current javascript
$(document).ready(function() {
$('#eventData').DataTable( {
'ajax': {
'url': 'data.json',
'dataSrc': 'eventList',
'columns': [
{'eventList': 'eventId'}
]
}
} );
} );
This question has accepted answers - jump to:
This discussion has been closed.
Answers
dataSrc: "responseList.0.eventList"
should do it. It will get the first element of theresponseList
array. Is that array only ever length 1?Allan
Yes Allan, always a single element container, its so obvious when you put it down. I've looked at other examples and seen this array element notation but never joined the dots. Thanks and apologies for the dumb Q.
Still struggling with this, I can see in Chrome that I'm getting the data from the ajax call but am singularly unable to bind this to the datatable. I have dataSrc set to "responseList.0.eventList".
I can't get any columns to bind. I have cut my table and data down to a single field "eventId" but can't see how the columns should be defined. I'm getting a Requested unknown paramater '0' for row 0, column 0. I've tried "data":"eventId" and other derivatives but just can't get this working.
Ok, this is weird but looks like my data is being returned from the server as an array, using JSON.Stringify brings it in as desired, still not binding to the table but have moved on.
Really looking for someone to plug a gap for me....
Have got the following defined:
This dataSrc function returns the following (output cut for brevity) which looks like good JSON to me.
My HTML is as:
So my question is how to I get eventId and status displayed? I've tried:
I still cant seem to even get a single field displayed, I'm really missing something fundamental.
That's weird.
Do you have a link to the page you can give me and I'll check it out.
Allan
Hi Allan, unfortunately this is all internal, the data comes back as JSON when using postman so I think its something that I'm doing wrong. Anyway, my major issue is that I can't seem to bind a field to the table. I've done this in the past so not sure what the issue is.
After doing some more testing, if I do:
JSON.stringify(json.responseList[0].eventList)
this returns JSON ok,
If I do it against the entire response:
JSON.stringify(json)
I get an error, which indicates that stringify won't work as the data is already json format.
When I look through the debugging tools it looks like a javascript array (maybe its my lack of familiarity with chrome dev tools that's the issue).
With my data and column definition in my previous post, should that be working?
Have attached the success function from my Ajax request, it shows the "data" as an object, I'd have thought JSON would show as a string?
Ok, more debugging, it appears my:
'dataSrc': function....
is never being triggered (I added a console.log() to the function and it never displays).
So, is it possible it's my request that's causing the issue? This is pretty much the entire script (obfuscated):
Ok, forget last post, issues were down to me introducing a success function... back to square 1 again.
I think I see where my problem resides. I'm using:
as I'm "POSTING" this data as part of my AJAX submission, problem is "data" seems to be used for the response data also so will I need to use a callback to set data after the response is received? If that's the case where do I set the callback up, which event do I use? etc.,
It shouldn't be. The
ajax.data
function will only be called when the Ajax request is submitted.ajax.dataSrc
will be used when the server responds to that request.Yeah - you can't do that (yet) I'm afraid. You'd need to use a callback if you need to know when the Ajax response has been returned.
Allan
Thanks Allan, been stripping this down and cutting nearly all functionality out. I'm unable to get even this config working:
The dataSrc function runs and the attachment shows how that looks in Chrome dev.
What the hell am I missing here????
Anyone have any ideas on why the last post wouldn't work? I get "Requested unknown parameter '0' for row 0, column 0" message even with this....
I can't really make this any simpler, I'm 100% I'm doing something really obviously dumb.
Here are my setting.
HTML
Script
And the JSON thats contained in the data1.json:
Still getting the "Requested unknown parameter '0' for row 0, column 0" message. HELP!!!!
Took me a minute there, but there are two issues with the code:
columns
array should not be nested inside theajax
option!data: 0
should bedata: 'eventId'
if you want to read theeventId
property.Example: http://live.datatables.net/lelexuki/1/edit .
Allan
Arrgggghhhh, that was it, a full day wasted. I should have checked that after I put a render event against one of the data configs that didn't fire. The
data:0
was me just clutching at straws. MUCH appreciated Allan!