Reloading JSON feed via AJAX with Datatables

decodedcreative

Hi,

I am currently working on a personal project using Last FM's API to display data on my music tastes. The first task I've given myself is to create a table which displays my Recently Played Tracks. I'm using the DataTables plugin as I want to refresh the table's data on the fly as I play more tunes, using AJAX.

I seem to be experiencing some problems when trying to populate my DataTable with the data received from the JSON Feed. If I use JQuery's map method to create a new, cleaner JSON object array with only the data I need then I can access the data fine, as shown in this fiddle:

http://jsfiddle.net/8rekuLaf/2/

However the problem with this approach is that I want to refresh the table on the fly as new data becomes available and so I think this extra step will prevent me taking advantage of ajax.reload to refresh the table. Therefore I've tried to go back and populate my table directly from the JSON feed but it has proved problematic as shown here:

http://jsfiddle.net/8rekuLaf/3/

Any help would be great. I know I'm nearly there!

allan

Sounds like a fun project - interested to hear how you get on with it!

However, you shouldn't need to use $.map - DataTables can read that format directly using the ajax.dataSrc and columns.data options.

Here is a little example: http://live.datatables.net/hituwepa/1/edit .

So having said that, and made that little example I see that paging is built into that feed. Is there a way to request more tracks up front? Otherwise you might need to make multiple Ajax calls and use rows.add() to add more data.

Allan

decodedcreative

Thank you so much for getting back to me. It seems so simple now but I was really scratching my head with that one for quite a while.

My next question - is it possible to pass data from 2 different json object properties to the same column in an either/or fashion? Basically when a track is currently being played the Last FM JSON date attribute is missing from the object and instead there is "@attr.nowplaying" attribute instead. I use the date information to order the table but if a track is "currently playing" then the data is missing and DataTables throws an error alert.

I thought one way round this would be to handle the error by saying if this attribute is missing then set the date text value to "Now" instead.

Thoughts?

allan

My next question - is it possible to pass data from 2 different json object properties to the same column in an either/or fashion?

Sure - use columns.render as a function. Then you can apply whatever logic you want to the data and return whatever value you want to appear.

Allan