Datatables.Net - not populating from JSON data

Question

I am working with a Datatables.Net plug into an internal web application to my company.

The issue Im facing is in the variable JSON, I can see that I have returned a JSON response, and it is valid according to JSONLint, but I cannot get the information out of the JSON array into my tables despite following all the examples on Datatables and searching their help site.

please see my code and let me know why this isn't populating the tables.

  function populateTable(json, tableId) {
        var id = 'table_' + tableId;
        console.log("Columns In");
        //console.log("table id: " + id + " JSON Response: " + json);
        try {
            var table = $('#' + id).DataTable({
                "data": json.d, 
                "deferRender": true,
                "columns:": [

                    { "data ": "CaseHandlerStaffNumber" },
                    { "data ": "RiskProfileText" },
                    { "data ": "AssignedCheckerStaffNumber" },
                    { "data ": "FeedbackUserStaffNumber" },
                    { "data ": "ComplaintRef" },
                    { "data ": "ChildComplaintRef" },
                    { "data ": "CaseTypeText" },
                    { "data ": "CheckGrade" }
                ]
            });
        } catch (e) {

        }

        try {
            table.columns().every(function () {
                var that = this;
                $('input', this.footer()).on('keyup change', function () {

                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });

        } catch (e) {

            console.log("Error detected: " + e);
            console.log(e);
        }
    }

-- edit --

this is an example of my JSON data.

{
"data": [{
    "CaseHandlerStaffNumber": "12345678",
    "RiskProfileText": "Low Risk FOS",
    "AssignedCheckerStaffNumber": "77665544",
    "FeedbackUserStaffNumber": null,
    "ComplaintRef": "999999",
    "ChildComplaintRef": "2333",
    "CaseTypeText": "FOS Submission",
    "CheckGrade": "Ungraded"
}]
}

also, this is how I am producing the JSON

[System.Web.Services.WebMethod()]
public static object GetDataTables(string checkId, int userId)
{

List<string> listOfColumnns = new List<string>();
listOfColumnns.Add("CaseHandlerStaffNumber");
listOfColumnns.Add("RiskProfileText");
listOfColumnns.Add("AssignedCheckerStaffNumber");
listOfColumnns.Add("FeedbackUserStaffNumber");
listOfColumnns.Add("ComplaintRef");
listOfColumnns.Add("ChildComplaintRef");
listOfColumnns.Add("CaseTypeText");
listOfColumnns.Add("CheckGrade");

int checkStatusId = Convert.ToInt32(checkId.Replace("hidJson_tbl_", ""));

TeamChecks tc = new TeamChecks();

DataTable dtMc = default(DataTable);
dtMc = tc.Get_DatatableFor_GridView(userId, checkStatusId);

DataTable dt = new DataTable();

foreach (void colName_loopVariable in listOfColumnns) {
    colName = colName_loopVariable;
    dt.Columns.Add(string.Format("{0}", colName));
}

foreach (void row_loopVariable in dtMc.Rows) {
    row = row_loopVariable;
    dt.Rows.Add(row("CaseHandlerStaffNumber"), row("RiskProfileText"), row("AssignedCheckerStaffNumber"), row("FeedbackUserStaffNumber"), row("ComplaintRef"), row("ChildComplaintRef"), row("CaseTypeText"), row("CheckGrade"));
}
string jsonResult = null;
jsonResult = Newtonsoft.Json.JsonConvert.SerializeObject(dt);
jsonResult = jsonResult.Replace("[{", "{\"data\" :[{").Replace("}]", "}]}");


return jsonResult;

}

Please note that JSONLint only make loose syntaxical check, it does not check for illegal chars, control chars and so on. You can easily get a Valid JSON that will fail IRL, passed over a network. You can use freeformatter.com/json-validator.html instead; RFC 4627 check including test if the JSON actually is useable. — davidkonrad
– davidkonrad, Commented May 17, 2016 at 7:27
when I use data: Jason this is throwing me an error directing me here datatables.net/manual/tech-notes/4 and gives me circa 4000 rows of nulls where I need only 17 rows of data — Simon Price
– Simon Price, Commented May 17, 2016 at 8:03
also, just checked the JSON at the link you gave and got two passes 1. Close The JSON input is valid according to RFC 4627 (JSON specfication). and 2 Close The JSON input is valid in JavaScript. — Simon Price
– Simon Price, Commented May 17, 2016 at 8:05
using data : json.data i get nothing in the table, but putting json.data to the debugger i see the json response. — Simon Price
– Simon Price, Commented May 17, 2016 at 8:07

Brian Rogers · Accepted Answer · 2016-05-16 17:21:50Z

1

First, make sure you remove extra space at the end of "data" property, e.g.

{ "data": "caseHandlerStaffNumber" },

If your data is in a form of array of objects you need to use "title" property as defined here https://datatables.net/examples/data_sources/js_array.html e.g.

$('#example').DataTable( {
    data: dataSet,
    columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" },
        { title: "Extn." },
        { title: "Start date" },
        { title: "Salary" }
    ]
} );

If you're using nuget package, it internally uses Json.NET serializer with an option to lower case first letter of the data set. So, you just need to use lower case when specifying data as follows:

                { "data": "caseHandlerStaffNumber" },
                { "data": "riskProfileText" },
                { "data": "assignedCheckerStaffNumber" },
                { "data": "feedbackUserStaffNumber" },
                { "data": "complaintRef" },
                { "data": "childComplaintRef" },
                { "data": "caseTypeText" },
                { "data": "checkGrade" }

edited May 16, 2016 at 17:21

Brian Rogers

130k31 gold badges315 silver badges315 bronze badges

answered May 16, 2016 at 11:59

SlavaGu

8471 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Simon Price Over a year ago

@SlaveGu I have edited my question to show an example of the data im working with, if this can help you help me. And yes, Im using Newtonsoft.JSON.Net nugget to serialize the data

Simon Price Over a year ago

also, that hasn't worked for me, using "data" : json gives me errors directing me here datatables.net/manual/tech-notes/4 and gives me circa 4000 rows of nulls where I need only 17 rows of data.

SlavaGu Over a year ago

I've just created a snippet with your json data and it works fine: jsfiddle.net/hn4yhacm Make sure your syntax is correct, for instance remove extra colon in "columns:" property.

Simon Price Over a year ago

I can see your code working and will try and emulate that accordingly

Collectives™ on Stack Overflow

Datatables.Net - not populating from JSON data

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related