Populate DataTables from json (not from ajax)

Question

I am trying to populate datatable on click. Initially I have this configuration:

var json = [];
var shippingMethodsTable = $("#shipping-methods-table").DataTable({
    'data': json,
    "columns": [
        { "data": "ShippingMethodId" },
        { "data": "MethodName"},
        { "data": "Code"},
        { "data": "ShippingTypeName" },
        { "data": "MaxWeight" }
    ]
});

After I click button I have json object of arrays:

json = ko.toJSON(data.shippingMethods); // I am using knockout.js to populate it

Result:

"[{"ShippingMethodId":2,"MethodName":"Priority Mail","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"70 lbs"},{"ShippingMethodId":4,"MethodName":"Priority Mail Express","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"70 lbs"},{"ShippingMethodId":5,"MethodName":"First-Class Mail","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"13 oz"},{"ShippingMethodId":6,"MethodName":"USPS Retail Ground","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"70 lbs"},{"ShippingMethodId":8,"MethodName":"Media Mail","Code":null,"ShippingTypeName":"Parcel","MaxWeight":"70 lbs"}]"

And then I am trying to update datatable

shippingMethodsTable.clear();
shippingMethodsTable.rows.add('{"data":' + json + '}');
shippingMethodsTable.draw();

But getting an error: Requested unknown parameter 'ShippingMethodId' for row 0, column 0

It looks like you're adding the entire JSON to each row, other than adding the relevant data to each row — GalAbra
– GalAbra, Commented Mar 2, 2019 at 8:00

user3307073 · Accepted Answer · 2019-03-04 08:56:48Z

1

Method rows.add() expects array of object, rather than object. So, try

shippingMethodsTable.clear();
shippingMethodsTable.rows.add(json);
shippingMethodsTable.draw();

Collectives™ on Stack Overflow

Populate DataTables from json (not from ajax)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related