DataTables warning

54696d20

Thanks for the help.

So I'm not even sure I can do it this way. It appears that older version were able to do this. Using .Net 4.0 and my code behind file is returning a JavaScriptSerializer string. I did go to the URL, but I wasn't understanding. Below is the warning

DataTables warning: table id=studentsTab - Requested unknown parameter 'StudentID' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

                                <table id="studentsTab" class="display" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>Student ID</th>
                                            <th>Student Name</th>
                                            <th>Absent</th>
                                            <th>Gender</th>
                                            <th>Grade</th>
                                            <th>Accommodation</th>
                                            <th>Test Date</th>
                                            <th>Session #</th>
                                            <th>Room</th>
                                            <th>Barcode</th>
                                            <th>Booklet</th>
                                        </tr>
                                    </thead>
                                </table>`

$.ajax({
        type: "POST",
        url: 'TestView.aspx/GetStudentsTabData',
        data: JSON.stringify({ TestID: testID }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#studentsTab').DataTable({
                data: data.d,
                columns: [
                    { data: "StudentID" },
                    { data: "StudentName" },
                    { data: "Absent" },
                    { data: "Gender" },
                    { data: "Grade" },
                    { data: "Accommodation" },
                    { data: "TestDate" },
                    { data: "SessionNumber" },
                    { data: "Room" },
                    { data: "Barcode" },
                    { data: "Booklet" }
                ],
            });
        },
        error: function (e) {
            console.log("Something Wrong. In GetStudentsTabData function\n" + e.d);
        },
        complete: function () {
        }
    })

I'm return some dummy data:

{"d":"[{\"StudentID\":\"654321\",\"StudentName\":\"Tim Testing\",\"Absent\":\"Yes\",\"Gender\":\"Male\",\"Grade\":12,\"Accommodation\":\"Yes\",\"TestDate\":\"10/30/2018\",\"SessionNumber\":1,\"Room\":\"101\",\"Barcode\":\"987654321\",\"Booklet\":\"1346579\"},{\"StudentID\":\"654321\",\"StudentName\":\"Tim Testing\",\"Absent\":\"Yes\",\"Gender\":\"Male\",\"Grade\":12,\"Accommodation\":\"Yes\",\"TestDate\":\"10/30/2018\",\"SessionNumber\":1,\"Room\":\"101\",\"Barcode\":\"987654321\",\"Booklet\":\"1346579\"}]"}

colin

Hi @54696d20 ,

Yep, that data is the problem - the .NET mucks it up so you'll need to strip out any offending characters. Rion Williams's reply on this thread should help.

Cheers,

Colin

54696d20

Thanks @colin . Tried that, with no luck. Don't you need the quotes?

colin

No, that's an oddity of the .NET stuff - there was another thread on that earlier this year but I couldn't it. Could you paste the data now that it's modified, please.

C

54696d20

Here you go:
{"d":"[{StudentID:123456,StudentName:Tony Tiger,Absent:Yes,Gender:Male,Grade:12,Accommodation:Yes,TestDate:10/30/2018,SessionNumber:1,Room:101,Barcode:123456789,Booklet:98765431}]"}

54696d20

@colin Yes, .net does add a back slash. since the string is wrapped in quotes. It's their form of escaping rules

54696d20

I thought that this would work

var formattedString = JSON.stringify(data).replace(/\/g, '');
$('#studentsTab').DataTable({
data: formattedString,
columns: [
{ data: "StudentID" },
{ data: "StudentName" },
{ data: "Absent" },
{ data: "Gender" },
{ data: "Grade" },
{ data: "Accommodation" },
{ data: "TestDate" },
{ data: "SessionNumber" },
{ data: "Room" },
{ data: "Barcode" },
{ data: "Booklet" }
],
});

formattedString =
{"d":"[{"StudentID":"123456","StudentName":"Tony Tiger","Absent":"Yes","Gender":"Male","Grade":12,"Accommodation":"Yes","TestDate":"10/30/2018","SessionNumber":1,"Room":"101","Barcode":"123456789","Booklet":"98765431"}]"}

colin

Yep, that's still the wrong format, if you follow Rion's example it should be something like:

{"d":[{"StudentID":"123456","StudentName":"Tony Tiger","Absent":"Yes","Gender":"Male","Grade":12,"Accommodation":"Yes","TestDate":"10/30/2018","SessionNumber":1,"Room":"101","Barcode":"123456789","Booklet":"98765431"}]}

As it stands, the JSON is just a string

C

54696d20

Following Rion's example:
var removeSlashes = serializer.Serialize(listTabData).Replace("\"", "");

This gives me:
{"d":"[{StudentID:123456,StudentName:Tony Tiger,Absent:Yes,Gender:Male,Grade:12,Accommodation:Yes,TestDate:10/30/2018,SessionNumber:1,Room:101,Barcode:123456789,Booklet:98765431}]"}

In your example. You have quotes

kthorngren

Rion's code is a bit different than yours:

// This would explicitly remove all of the backslashes from your string
yourString = yourString.Replace(@"\", "");

In your code you are replacing \" with nothing. But you should only be replacing \. Try changing .Replace("\"", ""); to .Replace("\", ""); removing the " after the backslash.

Kevin

54696d20

@kthorngren He's got two answers. The one you provided gives me:

{"d":"[{\"StudentID\":\"123456\",\"StudentName\":\"Tony Tiger\",\"Absent\":\"Yes\",\"Gender\":\"Male\",\"Grade\":12,\"Accommodation\":\"Yes\",\"TestDate\":\"10/30/2018\",\"SessionNumber\":1,\"Room\":\"101\",\"Barcode\":\"123456789\",\"Booklet\":\"98765431\"}]"}

Which doesn't work and is the same as if I didn't add it.

So I've been playing around. I'm having it return

{"d":"[{\"StudentID\":\"123456\",\"StudentName\":\"Tony Tiger\",\"Absent\":\"Yes\",\"Gender\":\"Male\",\"Grade\":12,\"Accommodation\":\"Yes\",\"TestDate\":\"10/30/2018\",\"SessionNumber\":1,\"Room\":\"101\",\"Barcode\":\"123456789\",\"Booklet\":\"98765431\"}]"}

With some changes to the string

var format = '{"d":' + JSON.stringify(data).substring(6).replace(/\/g, '');

I get:
{"d":[{"StudentID":"123456","StudentName":"Tony Tiger","Absent":"Yes","Gender":"Male","Grade":12,"Accommodation":"Yes","TestDate":"10/30/2018","SessionNumber":1,"Room":"101","Barcode":"123456789","Booklet":"98765431"}]"}

Which is really close to what @colin provided. STILL doesn't work. I don't get why this is difficult lol

Your suggestion .Replace("\", ""); isn't going to work, because C# will think you are escaping ". That's why you do something like .Replace(@"\", ""); Which doesn't work either

kthorngren

Copy your JSON string into https://jsonlint.com/ and you will see that it is still not a valid JSON string. The trailing " should not be there: "98765431"}]"}.

Kevin

54696d20

I understand. I made some for changes Thanks for the site @kthorngren

{"data":[{"StudentID":"123456","StudentName":"Tony Tiger","Absent":"Yes","Gender":"Male","Grade":12,"Accommodation":"Yes","TestDate":"10/30/2018","SessionNumber":1,"Room":"101","Barcode":"123456789","Booklet":"98765431"},{"StudentID":null,"StudentName":null,"Absent":null,"Gender":null,"Grade":0,"Accommodation":null,"TestDate":null,"SessionNumber":0,"Room":null,"Barcode":null,"Booklet":null}]}

Exactally the way @colin has it and it STILL doesn't work.

Error:
DataTables warning: table id=studentsTab - Requested unknown parameter 'StudentID' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

kthorngren

Your data might be passed to the ajax success function as a string. In that cae you will need to use something like this to convert it to Javascript data as the first line in the function.
data = JSON.parse(data);

Kevin

54696d20

Thanks for the information @kthorngren

I don't get an error, but nothing displays either.

$.ajax({
        type: "POST",
        url: 'TestView.aspx/GetStudentsTabData',
        data: JSON.stringify({ TestID: testID }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            //console.log(JSON.stringify(data));
            var format = '{"data":' + JSON.stringify(data).substring(6).replace(/\\/g, '');
            format = format.substring(0, format.length - 2) + '}'
            format = JSON.parse(format);
            console.log(format);
            $('#studentsTab').DataTable({
                data: format,
                columns: [
                    { data: "StudentID" },
                    { data: "StudentName" },
                    { data: "Absent" },
                    { data: "Gender" },
                    { data: "Grade" },
                    { data: "Accommodation" },
                    { data: "TestDate" },
                    { data: "SessionNumber" },
                    { data: "Room" },
                    { data: "Barcode" },
                    { data: "Booklet" }
                ],
            });
        },
        error: function (e) {
            console.log("Something Wrong. In GetStudentsTabData function\n" + e.d);
        },
        complete: function () {
        }
    })

colin

One other thing, you need to pass formattedString.d into the data, as it's the array DataTables wants. See here.

54696d20

Boom!! Adding that format.d worked.. THANKS @colin and @kthorngren

This is awesome!

colin

We get there eventually

54696d20

Just sucks that you have to jump through a bunch of loops. That's why I did the changes on the front end

var format = '{"d":' + JSON.stringify(data).substring(6).replace(/\/g, '');
format = format.substring(0, format.length - 2) + '}'
format = JSON.parse(format);

After the stored procedure is completed. I'll see how efficient this is.

Thanks again

allan

Good to hear you found a solution. For my own interest, could you do:

console.log( JSON.stringify( data ) );

just before var format = .... I'd like to see the exact JSON format used. Its really brittle to use text manipulation functions of a JSON string.

Allan

54696d20

@allan Sure,

{"d":"[{\"StudentID\":\"123456\",\"StudentName\":\"Tony Tiger\",\"Absent\":\"Yes\",\"Gender\":\"Male\",\"Grade\":12,\"Accommodation\":\"Yes\",\"TestDate\":\"10/30/2018\",\"SessionNumber\":1,\"Room\":\"101\",\"Barcode\":\"123456789\",\"Booklet\":\"98765431\"}]"}

allan

I've never understood why Microsoft decided to wrap valid JSON up as a string inside more valid JSON... What you could do here is use:

data: JSON.parse( data.d ),

That will just convert the data.d string to a real JSON array and pass that in as the array data source to DataTables. A little easier that the workaround you've come up with above.

Allan

54696d20

Nice.. that works. Thanks @allan. .NET does add a back slash if quotes are inside quotes. Since the string is wrapped in quotes. The \ is their form of escaping rules. It would be really nice if they allow single quotes.

Thanks again