How to build JSON string for JQuery DataTable?

Question

I have created a code which fetches data using the Ajax Call and populate it to the data table UI.

My code is as below:

jQuery.ajax(
    {
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Events')/items?$select=Title,Session_x0020_Room,Session_x0020_Date,StartTime,EndTime,Duties,OnsiteContactEmail",
        type: "GET",
        headers: { "Accept": "application/json;odata=verbose" },
        dataType: "json",                
        success: function (data, textStatus, xhr) {
                if (data.d.results.length > 0) {
                    var resColl = data.d.results;
                    var strData= new Array();
                    for(var i=0; i < resColl.length; i++){
                        var arr = new Array();
                        arr.push(resColl[i].Title);
                        arr.push(resColl[i].Session_x0020_Room);
                        strData[i] = JSON.stringify(arr);
                    }
                    $('#example').DataTable({
                        data:strData,
                        columns: [
                            { title: "Event" },
                            { title: "Room" }
                        ]
                    });
                }                                                               
            },
            error: function (data, textStatus, xhr) {
                console.error("Error while getting the data from Events list");
            }
        });

In strData object I am getting this value: "["Asian Women in Computing","Room 1"]"

But in the table of HTML I am not getting proper output.

What am I missing?

What happens if you remove strData[i] = JSON.stringify(arr);? I'm assuming it's printing charactars because strData is a JSON string instead of an actual object it will just print a single character at that specific location. — Rudie Visser
– Rudie Visser, Commented Jul 27, 2017 at 10:07
Actually there will be multiple records. In resColl there will be more than one records that's why I am pushing values into it. — Mohemmad K
– Mohemmad K, Commented Jul 27, 2017 at 10:08
Are you talking about the required scripts like jquery and jquery.dataTables.min.js @tilz0R? — Mohemmad K
– Mohemmad K, Commented Jul 27, 2017 at 10:09
Okay but what happens if you don't convert arr to a JSON string like so strData[i] = arr; @MohemmadK — Rudie Visser
– Rudie Visser, Commented Jul 27, 2017 at 10:11

Rudie Visser · Accepted Answer · 2017-08-17 09:26:35Z

1

I'm assuming that DataTable expects an array of arrays that exists of strings. You have an array of JSON strings because you convert the array arr to a JSON string and push it to strData, which DataTable will later use.

                var resColl = data.d.results;
                var strData= new Array();
                for(var i=0; i < resColl.length; i++){
                    var arr = new Array();
                    arr.push(resColl[i].Title);
                    arr.push(resColl[i].Session_x0020_Room);
                    strData[i] = arr;
                }

Don't convert arr to a JSON string and it should print fine.

edited Aug 17, 2017 at 9:26

answered Jul 27, 2017 at 10:17

Rudie Visser

5806 silver badges24 bronze badges

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

2 Comments

Mohemmad K Over a year ago

Thank you sir. It is working perfectly fine. One question, don't I require to convert the string into JSON string?

Rudie Visser Over a year ago

No, in this case you don't need to convert the array into a JSON string because the required data set needs an array of arrays that consists out of strings, not an array that consists out of JSON strings.

Collectives™ on Stack Overflow

How to build JSON string for JQuery DataTable?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related