how to use json data with the table

vikceo

Hi

my RESt returns data in json format like

[{"AppVersion":"v1.1","FeedbackId":188,"FeedbackType":"Error","Os":"iPad Simulator:iOS:iPad Simulator x86_64","OsVersion":"8.3","OscVersion":"11.1.10.0.0","ReportedBy":null,"Feedbackdate":"06-11-2015","ServerUrl":"http://127.0.0.1:7101/MUDRESTService/rest/v1"},{"AppVersion":"v1.1","FeedbackId":190,"FeedbackType":"Error","Os":"iPad Simulator:iOS:iPad Simulator x86_64","OsVersion":"8.3","OscVersion":"11.1.10.0.0","ReportedBy":null,"Feedbackdate":"06-11-2015","ServerUrl":"http://127.0.0.1:7101/MUDRESTService/rest/v1"}]

i was trying to use datatables as

$.ajax({ url: 'http://127.0.0.1:7101/MUDRESTService/rest/v1/mfeedbackerrors?onlyData=true&limit=99',
        
             type: 'get',  
             dataType: 'json',    
             success: function(output) {
                console.log('line first resp');
                console.log(output) ; 
             
                var ddata = JSON.stringify(output.items);
          
                console.log(ddata);
                dataSet =ddata;
                $(document).ready(function() {
    $('#feedback-data-table').DataTable( {
        data: dataSet,
        columns: [
            { title: "App Version" },
            { title: "Feedback Type" },
            { title: "OS" },
            { title: "OS Version" },
            { title: "User" },
            { title: "Date" },
            { title: "Server Url" }
        ]
    } );
} );
             }
   
           });

This wont work i know as the data it is expecting in the format:

var dataSet = [
    [ "v1.1", "Error", "iOS", "9.2", "sales representative", "11-11-2015","http://localhost:7101/feedback" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ,"http://localhost:7101/feedback"]
]

Please advise how to configure either the component to accept data in json format or how to convert data into desired format

jLinux

Format your code... Use the instructions that are in plain english right under the input box you typed the question in.

Its easier to help when the code/question is readable.

vikceo

they forgot to mention how to edit your post in same plain english.

jLinux

http://d.pr/i/1iJTs

vikceo

ok thanks done. hope someone replies

jLinux

See, that makes it easier!

So, a few things I notice...

1. You have a $(document).ready() within the success callback of your AJAX script... Thats kind of a face-palm moment. The document.ready has fired a looooong time before that.
2. You're using your own $.ajax script, when you could just be using the ajax option, and have DataTables pull the data and load it automatically...
3. You're specifying the columns.title, which is fine, but since your AJAX data contains objects (not arrays), you need to specify the columns.data as well, to tell DataTables what elements to put in which columns.

The code you have above is actually more than you really need, I think this should work for you..

$(document).ready(function() {
    $('#feedback-data-table').DataTable( {
        ajax: {
            url: "http://127.0.0.1:7101/MUDRESTService/rest/v1/mfeedbackerrors",
            data: { onlyData: true, limit: "99" },
            //data: "onlyData=true&limit=99", // This will work too
            dataSrc: "items"
        },
        columns: [
            { title: "App Version", data: "AppVersion" },
            { title: "Feedback Type", data: "FeedbackId" },
            { title: "OS", data: "Os" },
            { title: "OS Version", data: "OsVersion" },
            { title: "User", data: "ReportedBy" },
            { title: "Date", data: "Feedbackdate"},
            { title: "Server Url", data: "ServerUrl" }
        ]
    } );
} );

Couple things for you to note, I notice in line 8 of your 2nd code snippet, you refer to output.items, so I'm assuming that your JSON output is something like this:

{
   "items":[
      {
         "AppVersion":"v1.1",
         "FeedbackId":188,
         "FeedbackType":"Error",
         "Os":"iPad Simulator:iOS:iPad Simulator x86_64",
         "OsVersion":"8.3",
         "OscVersion":"11.1.10.0.0",
         "ReportedBy":null,
         "Feedbackdate":"06-11-2015",
         "ServerUrl":"http://127.0.0.1:7101/MUDRESTService/rest/v1"
      },
      {
         "AppVersion":"v1.1",
         "FeedbackId":190,
         "FeedbackType":"Error",
         "Os":"iPad Simulator:iOS:iPad Simulator x86_64",
         "OsVersion":"8.3",
         "OscVersion":"11.1.10.0.0",
         "ReportedBy":null,
         "Feedbackdate":"06-11-2015",
         "ServerUrl":"http://127.0.0.1:7101/MUDRESTService/rest/v1"
      }
   ]
}

Since DataTables expects data to be the root data source object, and you're using items, I set the ajax.dataSrc to items..

Also, I see you have some data attached to the end of the URI, so I went and moved that to the ajax.data, and it should work fine.

Your AJAX request is using GET, which is the default for DataTables AJAX, but if you ever need to change it, just use the ajax.type setting

Well, I think thats it...

irispanabaker

Please use http://codebeautify.org/jsonvalidate for Validating JSON data and to format http://jsonformatter.org

jLinux

Uhm... what @irispanabaker?

Edit Oh... ^ spammer! Block em @allan! lol

vikceo

wow this is an amazing stuff. way better than i though.

Wondering what would be the suggested way to handle a master detail scenario.

So, say my REST service returns departments and manger details of each dept (consider 1:1 parent child) then what could be used to show such data?

jLinux

a master detail scenario

Not sure what that is? Master detail scenario?..

It looks like what you might need to do, is use a function as the value for ajax. Read through the documentation to see some examples.

vikceo

yes a master detail scenario however, details will always be just one row