JSON element is null resulting in "Uncaught TypeError: " for JQote2

Question

Background: I have two dropdowns on my page and when they are changed, I am using the JQote plugin by AEFXX to populate a table with some of the returned JSON data. In the JSON response, some of the User Stories have Tasks associated with them, but these tasks do not have much information with them, so I had to do an extra GET request for each of the Tasks to return this information. Some of the tasks which are returned do not have an Owner assigned, resulting in the field Task.Owner = null.

Here is the code that I'm using to get each of the tasks:

if(result.Tasks != ""){
 $.each(result.Tasks, function(i, tasks){
    console.log(tasks._ref);
    $.ajax({
        url: tasks._ref,
        dataType: 'jsonp',
        jsonp: 'jsonp',
        success: function(data, textStatus, jqXHR) {
            $.get("task.tpl", function(tmpl) {
                $("#reqs").jqoteapp(tmpl, data.Task);
                });
            }
    });
 })
}

The template (task.tpl) looks like this:

<tr id="infoReturned">
  <td name="id" class="row"><%= this.FormattedID %></td>
  <td name="name" class="row"><%= this._refObjectName %></td>
  <td name="state" class="row"><%= this.State %></td>
  <td name="owner" class="row"><%= this.Owner._refObjectName %></td>
</tr>

Trial: I referred to How to test an empty Object from JSON.

I added the following function:

        function isEmpty(obj) {
            for (var prop in obj) {
                if (obj.hasOwnProperty(prop))
                    console.log("false");
                    return false;
            }
        }

, modified the success function of the GET to be this:

success: function(data, textStatus, jqXHR) {
 if (isEmpty(data.Task.Owner)){
    $.get("emptyTask.tpl", function(tmpl) {
    $("#reqs").jqoteapp(tmpl, data.Task);
    });                                         
 }
 else {
    $.get("task.tpl", function(tmpl) {
    $("#reqs").jqoteapp(tmpl, data.Task);
    });
 }

}

, and created a new template file (emptyTask.tpl) with the Owner section empty:

<tr id="infoReturned">
 <td name="id" class="row"><%= this.FormattedID %></td>
 <td name="name" class="row"><%= this._refObjectName %></td>
 <td name="state" class="row"><%= this.State %></td>
 <td name="owner" class="row"></td>
</tr>

, but I'm still getting the error:

Uncaught TypeError: <unknown message TemplateExecutionError>
(anonymous function)
$.extend.jqotejquery.jqote2.js:107
$.each.$.fn.(anonymous function)jquery.jqote2.js:76
$.ajax.success.$.each.$.each.$.ajax.successpy2Test.html:155
jQuery.extend._Deferred.deferred.resolveWithjquery-latest.js:1016
donejquery-latest.js:7247
jQuery.ajaxTransport.send.callbackjquery-latest.js:8028

Question: How can I fix the last part of the task.tpl to account for possible null values, or modify the AJAX success function to correctly handle this case?

score 0 · Accepted Answer · answered Oct 08 '11 at 03:02

Found a solution which is similar to what I was trying earlier:

if ((data.Task.Owner) == null){
  $.get("emptyTask.tpl", function(tmpl) {
  $("#reqs").jqoteapp(tmpl, data.Task);
  });                                           
}
else {
  $.get("task.tpl", function(tmpl) {
  $("#reqs").jqoteapp(tmpl, data.Task);
  });
}

I'm still interested in a solution in which the template file is modified to handle this issue though.

Please post if you have another answer!

JSON element is null resulting in "Uncaught TypeError: " for JQote2

1 Answers1