Why is my Ajax code building an empty <tr> as first item?

[oneftfunc]

Im receiving the following JSON object:\[code\][Object, Object, Object]0: Objecta: "a"b: "b"c: "c"__proto__: Object1: Objecta: "a"b: "b"c: "c"__proto__: Object2: Objecta: "a"b: "b"c: "c"__proto__: Objectlength: 3__proto__: Array[0]\[/code\]With the following ajax code:\[code\]function describeItems() { var html; var loadingContainer = $("<div class='containerLoading'></div>"); var emptyContainer = $('<div class="emptyContainer"><div style="width: 400px; margin-left:20px;"><h4>Let\'s get started!</h4>You do not have anything in your bucket.<br \>Click the shop button to start shopping items.<button style="margin-top: 20px;" class="btn btn-large btn-primary" type="button" data-toggle="modal" data-target="#shop-items">Shop Items</button></div></div>'); $("#items-table").append(loadingContainer.fadeIn(100)); $.ajax( { type: "POST", url: "function.php", data: {action: 'test'}, dataType: "json", cache: "false", success: function(data) { // DEBUG console.log(data) if (data != null) { // DEBUG //console.log(data); html = html + '<tr>'; html = html + '<td><input type="checkbox" value=""></td>'; $.each(data, function(key,value) { if (!$.isPlainObject(value)) { html = html + '<td>' + value + '</td>'; }; }); html = html + '</tr>'; $.each(data, function(key,value) { html = html + '<tr>'; html = html + '<td><input type="checkbox" value=""></td>'; if ($.isPlainObject(value)) { // DEBUG //console.log(value); $.each(data[key], function(key, value) { html = html + '<td>' + value + '</td>'; }); }; html = html + '</tr>'; }); html = html + '</tbody>'; // ADD THE HTML TO THE DIV. $('#innerContent').html(html); // WHEN LOADING IS DONE, REMOVE OVERLAY. $("#item-table .containerLoading").fadeOut(100, function() { $(this).remove(); }); } else { // WHEN LOADING IS DONE, REMOVE OVERLAY. $("#item-table .containerLoading").fadeOut(100, function() { $(this).remove(); }); $("#item-table").append(emptyContainer.fadeIn(100)); } }, // END OF SUCCESS error: function (xhr, ajaxOptions, thrownError) { alert('Response Code: ' + xhr.status); alert(thrownError); alert(xhr.responseText); } }); // END OF $.AJAX }; \[/code\]But somehow my html table has an empty \[code\]<tr>\[/code\] in it, at least it has not object content in it..:\[code\]<table class="table table-striped table-condensed"> <thead> <tr> <th></th> <th>a</th> <th>b</th> <th>c</th> </tr> </thead> <tbody id="innerContent"> <tr> <td> <input type="checkbox" value=""> </td> </tr> <tr> <td> <input type="checkbox" value=""> </td> <td> a </td> <td> b </td> <td> c </td> </tr> <tr> <td> <input type="checkbox" value=""> </td> <td> a </td> <td> b </td> <td> c </td> </tr> <tr> <td> <input type="checkbox" value=""> </td> <td> a </td> <td> b </td> <td> c </td> </tr> </tbody></table>\[/code\]What do I need to change to remove the first empty \[code\]<tr>\[/code\]?