How do I render a table with missing JSON nodes?

jgrale

So I've looked high and low, read many forum topics on this site, and feel I'm so close, but I haven't figured out the solution. I know you want to see a test case, but I'm using datatables in SharePoint 2013 and I'm not sure how I would provide one. So I'll try my best to describe the issue.

I have a SP site that contains many subsites. Each subsite contains a task list that is structured exactly the same. I'm creating a page in the main site that rolls up all these lists into a single dataTable.

To do this, I've written some js that loops a REST call to each list on each site. Here is that REST call: https://my.domain.com/" + projectSite + "/_api/Web/Lists/GetbyTitle('Tasks')/items select=Title,StartDate,DueDate,CriticalMissionGoal,ServiceLine,AssignedTo/Title&$expand=AssignedTo/ID&$filter=(OrgOrDept eq 'Organization')

I've tested the REST call on each site and each list is returning data. However, the way SP is set up, any field that has a users name in it is actually returned as a nested JSON object in the main data.d.results JSON object. One of the fields I'm trying to return is Assigned to, which is user name, and that field is being returned as a nested JSON object in the main call.

Here's the issue. When the Assigned to field on the originating site is not filled in I get the error: Unable to get property 'parentNode' of undefined or null reference

I know I'm getting that error because of how the JSON is returned when an Assigned To field is not filled in. Below are two examples, the first is what it looks like when the field is filled in, the second when the field is not filled in.

Field filled in:

0

AssignedTo
    results
        0
            [functions]
            __metadata
            Title        "my name"
            length     1
CriticalMissionGoal        "CM2"
DueDate                        "2014-10-31T04:00:00Z"
ServiceLine                   "ULL"
StartDate                       "2014-10-28T04:00:00Z"
Title                                "Create policy template"

Field Not filled in:

3

AssignedTo
            [functions]
            __metadata
CriticalMissionGoal        "CM2"
DueDate                        null
ServiceLine                   "ULL"
StartDate                       null
Title                                "Input from Persons Served and Other Stakeholders"

As we can clearly see, in the array[3] item, the AssignedTo does not contain the Title and length field as it exists in the array[0] item. In fact, it doesn't even return the null value as the main nodes return in array[3] item when the field is left blank.

I read this: https://www.datatables.net/forums/discussion/4947/deep-property-reading-for-a-data-source-missing-nested-object-behavior

From this it seemed like adding sDefaultContent would do the trick, and here you see how I used this function.

$('#goalTable').dataTable({

"bDestroy" : true,
"bProcessing" : true,
"aaData" : merged,
"aoColumns" : [
            { "mData" : "Title" },
            { "mData" : "StartDate" },
            { "mData" : "DueDate" },
            { "mData" : "CriticalMissionGoal" },
            { "mData" : "ServiceLine" },
            {
                   "sDefaultContent": "Not Assigned",
                "mData" : "AssignedTo.results[0].Title"                     
            }

            ]               
    });

If I take the mData function away from this columns function, then every line gets filled in with "Not Assigned", so I know I'm using this correctly and that the function works. But as soon as I add the mData back in, the Unable to get property 'parentNode' of undefined or null reference keeps rearing it's ugly head.

My question is what do I do to deal with JSON nodes that are not returned?

Thanks.

allan

Hi,

Thanks for your question! Interestingly, the error you are seeing ("Unable to get property 'parentNode' of undefined or null reference") is not the error I would expect from the description you gave.

Normally, yes, I would immediately suggest you use columns.defaultContent as you have done, and that is what I first thought about when I saw you message, until you mentioned the error above.

That makes things a little more interesting!

Normally, that error will occur if there is a missing HTML column in the table. Are you setting up the columns in the HTML prior to the initialisation above?

Could you show me a backtrace of that error, so we know what functions were being called just before that error comes up (the little arrow next to the error message in the Chrome console will give a good backtrace).

The finally thing I notice is the use of array syntax in mData. Could you try this:

"mData": "AssignedTo.results.0.Title"

The array syntax tells DataTables to join the content based on the value inside the array! You'd get away with it if there is only one item in the array, but it will look odd if there are more.

Regards,
Allan

jgrale

First of all, thank you so much for getting back to me so quickly. I really appreciate that.

Next, yes, I am setting the columns in the HTML, and I was careful to make sure the count of columns I was adding matched the count of columns I am pulling back because I saw that error described and solved over and over again.

Okay, so I made the change to the array syntax and voila! Fixed. I through away almost a day trying to figure this out and you solved it in 26 minutes.

Thank you so much!

allan

You are very welcome - even if it wasn't the fix I though it would be.

I might have a poke around and see why exactly that error occurs from such circumstances, but good to hear that it is working now!

Regards,
Allan