Handle with null JSON object

Question

I am new to JSON and jQuery. What I am doing is get the JSON object from the api and display it as a table. But some elements in JSON array are null

For example; A JSON array looks like this :

[
  {"key":"first" , "name" :{"last":"Owen"} , "age" :{"number": 18} },
  {"key":"second" , "name" : null , "age" :{"number": 20}  } ,
  {"key":"third" , "name" : {"last":"Jay"} , "age" :null }
]

So to input to the table, I do this:

$.each(jsonarray, function(i,data){
 $("<tr>").append(
   $.('<td>').text(data.key),
   $.('<td>').text(data.name.last),
   $.('<td>').text(data.age.number)).appendTo('.table');
});

so the thing is they will get error:

Cannot read property 'last' of null ; Cannot read property 'number' of null

because in the second and third element, name is null and age is null. Therefore, there is no such thing is name.last and age.number to add in.

What I want is whenever they get something like that, they automatically return "No Information" to add into the table

However, I still don't know how to do it. I did try to write an function to check. For example like this :

    function check1(datum){
    if (datum !== null && datum !== undefined){
        return datum.last;
    }
    else {
        return "No Information"
    }
}
    function check2(datum){
    if (datum !== null && datum !== undefined){
        return datum.number;
    }
    else {
        return "No Information"
    }
}

But it is very tedious because I need to write 2 separate function to check (1 for name and 1 for age). I just wonder is there any elegant way to do one function for all?

Answer 1

Can this meet your need?

var noDataTip = 'No Information';
$.each(jsonarray, function(i,data) {
    $("<tr>").append(
    $('<td>').text(data.key),
    $('<td>').text( (data.name && data.name.last) || noDataTip),
    $('<td>').text( (data.age && data.age.number)) || noDataTip).appendTo('.table');
});

Answer 2

try this. :)

$.each(jsonarray, function(i,data){
    if(data.key === undefined || data.key === null){
        data.key = 'none';
    }
    if(data.name === undefined || data.name === null){
        data.name = 'none';
    }
    if(data.age === undefined || data.age === null){
        data.age = 'none';
    }
    $("<tr>").append(
        $.('<td>').text(data.key),
        $.('<td>').text(data.name.last),
        $.('<td>').text(data.age.number)
    ).appendTo('.table');
});

Answer 3

    $.each(jsonarray, function(i,data){
        $("<tr>").append(
        $.('<td>').text(data.key),
        $.('<td>').text( data.name && data.name.last ? data.name.last : "No Information"),
        $.('<td>').text( data.age && data.age.number ?
 data.age.number : "No Information").appendTo('.table');
    });

Answer 4

I would write a function that makes a simple check for null:

function checkForNull(item) {
var data = "No information";
  if(!item === null) {
     data = item;
   }    
   return data;    
}

Then you could use it as follows:

$.('<td>').text(checkForNull(data.key))