EDIT: the picture you showed is showing an array of arrays. The reason you are getting comma separated values is because the variable query is actually an array, so when you join it with a string, JS is just listing the values of the subarray in CSV format.
Personally, I think you don't even have to use jQuery for this task, sometimes it's a lot easier to use a couple of nested for loops. You have to loop through the main array, and then each of the subarrays and join them inside of <td> tasks. After that, you can use jQuery for anything you want to do with the elements.
var strData = "";
if (allData.Data) {
for (var i = 0; i < allData.Data.length; i++) {
if (allData.Data[i]) {
for (var j = 0; j < allData.Data[i].length; j++) {
strData += '<td>' + allData.Data[i][j] + '</td>';
}
}
}
}
However, if you really want to use the jQuery each function, you can do
var strData = "";
if (allData.Data) {
$.each(allData.Data, function(i, query) {
// Note this will skip everything that equals to false in JavaScript
// not just null, for example, "", false, 0, etc...
if (!query) return;
$.each(query, function(j, value) {
// See note above
if (!value) return;
strData += '<td>' + value + '</td>';
});
});
}
There's a variety of shortcuts you can take using built-in array functions, such as join as @zan suggested in his answer.
EDIT 2: Added null checks
EDIT 3: Added null checks to jQuery