Ajax data source (objects) formatting issue

src0010

Hi,

I am trying to use Ajax data source (objects) to populate my table (using C# MVC server side). Below is the json string format I am passing in:

{"data":[{"ID":1,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":2,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":3,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"}]}

However, when I call that json string in the datatables init ajax it is outputting as the following:

"ajax": "{"data":[{"ID":1,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":2,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":3,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"}]}",

Appears that the parenthesis are getting converted. Any suggestions on how to correctly pass the ajax string directly (not reading from a separate file)?

Thanks in advance!

rdm

I use MVC 5 (.NET Framework) and have dealt with some pain points myself. If you could provide some more detail, like your jQuery $.ajax(...) block and your JSON source (e.g. JsonResult in an MVC controller, from a WebApi controller, etc.) I might have have some ideas.

And are you using Datatables by itself or you also using Editor?

src0010

@rdm Here is some sample code:

In my controller I call following to serialize my SQL objects:

  public string GetCommentsJson(String pageId)
  {
      dc = new DataContext();

      try
      {

          var json = JsonConvert.SerializeObject(allCommentResults(dc, pageId).ToList());

          return json;

      }
      catch (Exception e)
      {
          return string.Empty;
      }
  }

I pass this to view in ViewBag:

ViewBag.Comments = GetCommentsJson("##");

And in the view call the viewbag json string and pass that to the datatable ajax:

string commentsJson = ViewBag.Comments != null ? "{\"data\":" + (string)ViewBag.Comments + "}" : string.Empty;


  var table = $('#example').DataTable({
      "ajax": "@commentsJson",
      "columns": [
          {
              "className": 'details-control',
              "orderable": false,
              "data": null,
              "defaultContent": '<i class="fas fa-plus-square"></i>'
          },
          .
          .
          .
      ],
      "order": [[1, 'asc']]
  });

DAustin

I think you need to output it using Html.Raw() in the view or controller

rdm

@src0010 -- I second the suggestion from @DAustin -- at least as a diagnostic step.

I suspect that there's a middle "encoding" step happening somewhere in the chain of communication.

The only other thing I can suggest is that I followed the voice of many developers and have long-since avoided use of ViewBag in favor of models. ViewBags are convenient because they are dynamic, but you lose out on all the compile-time features that you have with strongly-typed models. The symptom you are reporting now could have been identified and prevented with use of models and any necessary logic on the MVC side, so that on the View side, all you need to do is make your ajax call.

src0010

@rdm @DAustin I thought I had tried HTML.Raw(), but maybe was mistaken. I added that and it seems to have helped the formatting. Snippet below:

    <script>
        $(document).ready(function () {
            // Init DataTables
            var table = $('#example').DataTable({
                "ajax": "{"data":[{"ID":1,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":2,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":3,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"}]}",

    .
    .
    .
        });
    </script>

From what I can tell the JSON is now valid, however the data is not loading and console is indicating following error:

Uncaught SyntaxError: Unexpected identifier

There are no other console errors and no network response errors. Thoughts?

Thanks!

kthorngren

From what I can tell the JSON is now valid,

You can validate your json at https://jsonlint.com/.

Uncaught SyntaxError: Unexpected identifier

That is a syntax error in your Javascript code.

        var table = $('#example').DataTable({
            "ajax": "{"data":[{"ID":1,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":2,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":3,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"}]}",

This is invalid because the parameter is not the URL that the ajax option is expecting. To add data this way you would use the data option. However what you are trying to add is a string. you could try something like this:

        var data = JSON.parse("{"data":[{"ID":1,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":2,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"},{"ID":3,"PageID":"x11","PageTitle":"B Corp: Business Sustainability with a Force for Good","UserName":"Ingeniux","Email":"nobody@ingeniux.com","Comments":"Blah blab blah!","Rating":0,"CommentDate":"2018-09-11T17:01:17.647","Approved":true,"CommentID":"1","ParentID":"1"}]}");

        var table = $('#example').DataTable({
            "data": data.data,

Kevin

src0010

@kthorngren Aw, that was my confusion! I routed the ajax call to my action method that is returning the json data and all is working now. Thanks!

src0010

@rdm @DAustin Thanks for the all help as well! In the end could only mark on as the answer I think @kthorngren outlined the best practice and using that negated the json formatting issue all together. Thanks again all!