Question

I have a JSON object that I am looping over with each() to add table rows to a table. I can’t ensure the completeness of the data presented in the JSON arrays and I occasionally run into some NULLs.

For instance:

// A GOOD ARRAY 
{
id: "193",
location: {
city: "Atlanta",
state: "GA"
},
name: "John"
},
// NOW WE STUMBLE UPON A BAD ARRAY WITH A NULL
{
id: "194",
location: {
city: "Boise",
state: null
},
name: "Frank"
},
{...}

Now, when I am dealing with JSON objects that have no NULL values, the each() loops over with no problems. As soon as I encounter a member with NULL anywhere in the array, the looping breaks.

This is how I am looping over this:

$.getJSON("/getstuff/jsonprovider.php", function (data) {

        var results = data.parentnode;

        var tableThing = $(".myTable tbody");
            var i = 0;

        $.each(results, function () {
                tableThing.append('<tr><td></td><td>' + results[i].id + '</td><td>' + results[i].name + '</td><td>' + results[i].location.city + ', ' + results[i].location.state + '</td></tr>');
        i++;
        });

        });

Should I be investigating something other than each() here, or should I be using a completely different method?

Thank you

Answer 1

Since your data may have nulls, you need to make sure that the data exists before you attempt to use it. It is also more efficient to only use .append once. Below i’m using a default empty object and $.extend deep copy to ensure that the object we are pulling data from always has all data values defined, even if the value isn’t in the json. I’m still not sure how null’s will be handled at this point.

var emptyObj = {
    id: "",
    name: "",
    location: {
        city: "",
        state: ""
    }
},htmlToAppend = "";

$.each(results, function (i,obj) {
    var newObj = $.extend(true,{},emptyObj,obj);
    htmlToAppend += '<tr><td></td><td>' + newObj.id + '</td><td>' + newObj.name + '</td><td>' + newObj.location.city + ', ' + newObj.location.state + '</td></tr>';
});
tableThing.append(htmlToAppend);