Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82018

Invalid JSON Data with Newtonsoft JSON Serializer

$
0
0

Hi, I'm making a web app using ASP.NET Core and Entity Framework Core.
And I have a table called Items. I pass the list of items to DataTables using Newtonsoft JSON Serializer.
I don't know why I got this error every time I have a lot of Item data, but this doesn't happen in other lists / DataTables (yet).

DataTables warning: table id=ItemTable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

Currently, I have 21 rows of Item data. And this actually happened several times.
1. I use this code and my data is at 15 rows, got that error.
public string GetAll()
{
var model = _itemRepository.GetAll();

            var settings = new JsonSerializerSettings
            {
                ReferenceLoopHandling = ReferenceLoopHandling.Ignore
            };
            var serialized = JsonConvert.SerializeObject(model, Formatting.Indented, settings);

            return serialized;
        }

2. I've changed the code to this, I can store up to 17-21 rows and after row 21 I get that error again.
public string GetAll()
{
var model = _itemRepository.GetAll();

                var settings = new JsonSerializerSettings
                {
                    ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                };
                var serialized = JsonConvert.SerializeObject(model, settings);

                return serialized;
            }

This is my DataTable inside my Item List view

var table = $("#ItemTable").DataTable({
                "processing": true,
                "ajax": {
                    "url": "Item/GetAll",
                    "dataSrc": ""
                },
                "columnDefs": [
                    {
                        "targets": 0,
                        "title": "Id",
                        "data": "Id",
                        "visible": false
                    },
                    {
                        "targets": 1,
                        "title": "Brand",
                        "data": "Brand.Name"
                    },
                    {
                        "targets": 2,
                        "title": "Name",
                        "data": "Name"
                    },
                    {
                        "targets": 3,
                        "title": "Price",
                        "data": "Price",
                        "render": $.fn.dataTable.render.number( ',', '.', 2, 'Rp ' ),
                        "searchable": false
                    },
                    {
                        "targets": 4,
                        "title": "UoM",
                        "data": "UoM.Name"
                    },
                    {
                        "targets": 5,
                        "title": "Category",
                        "data": "Category.Name"
                    },
                    {
                        "targets": 6,
                        "title": "Stock On Hand",
                        "data": "StockOnHand",
                        "render": $.fn.dataTable.render.number( ',' ),
                        "searchable": false
                    },
                    {
                        "targets": 7,
                        "title": "On Reserved",
                        "data": "OnReserved",
                        "render": $.fn.dataTable.render.number( ',' ),
                        "searchable": false
                    },
                    {
                        "targets": 8,
                        "title": "Actions",
                        "data": null,
                        "searchable": false,
                        "orderable": false,
                        "render": function (data, type, row) {
                            if (data.ActiveStatus == "Active") {
                                return "<div class=\"btn-group\">" +
                                    "<button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" +
                                    "Actions" +
                                    "</button>" +
                                    "<div class=\"dropdown-menu\">" +
                                    "<a id=\"Detail\" class=\"dropdown-item\" href=\"#\"><i class=\"fas fa-stream\"></i>&nbsp;&nbsp;Details</a>" +
                                    "<a id=\"Edit\" class=\"dropdown-item\" href=\"#\"><i class=\"fas fa-pen\"></i>&nbsp;&nbsp;Edit</a>" +
                                    "<div class=\"dropdown-divider\"></div>" +
                                    "<a id=\"SetInactive\" class=\"dropdown-item\" href=\"#\"><i class=\"far fa-square\"></i>&nbsp;&nbsp;Inactive</a>" +
                                    "<div class=\"dropdown-divider\"></div>" +
                                    "<a id=\"Delete\" class=\"dropdown-item\" href=\"#\"><i class=\"fas fa-trash\"></i>&nbsp;&nbsp;Delete</a>" +
                                    "</div>" +
                                    "</div>";
                            }
                            else if (data.ActiveStatus == "Inactive") {
                                return "<div class=\"btn-group\">" +
                                    "<button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" +
                                    "Actions" +
                                    "</button>" +
                                    "<div class=\"dropdown-menu\">" +
                                    "<a id=\"Detail\" class=\"dropdown-item\" href=\"#\"><i class=\"fas fa-stream\"></i>&nbsp;&nbsp;Details</a>" +
                                    "<a id=\"Edit\" class=\"dropdown-item\" href=\"#\"><i class=\"fas fa-pen\"></i>&nbsp;&nbsp;Edit</a>" +
                                    "<div class=\"dropdown-divider\"></div>" +
                                    "<a id=\"SetActive\" class=\"dropdown-item\" href=\"#\"><i class=\"far fa-check-square\"></i>&nbsp;&nbsp;Active</a>" +
                                    "<div class=\"dropdown-divider\"></div>" +
                                    "<a id=\"Delete\" class=\"dropdown-item\" href=\"#\"><i class=\"fas fa-trash\"></i>&nbsp;&nbsp;Delete</a>" +
                                    "</div>" +
                                    "</div>";
                            }
                        }
                    }
                ],
                "order": [[2, "asc"]],
                "createdRow": function (row, data, dataIndex) {
                    if (data.ActiveStatus == "Inactive") {
                        $(row).addClass("table-warning");
                    }
                }
            });

This happens only on Item. Loading data takes a little bit too long. When I check the output of the GetAll method, it returns JSON like string, and it is a very long and I think it never ends, just keep scrolling.

Please help. If you need my code, I could send them.

Thank you, kind regards
Michael Reno


Viewing all articles
Browse latest Browse all 82018

Trending Articles