I am appending text which is stored in a javascript variable into a div element. The issue is that the depending on the situation there may or may not be text stored in that variable. If there is not I end up with the text 'undefined' where the valid text would have been in the div.

so as an example:

htmlelement.innerhtml = '<h2>'+array.object.title+
                        '</h2><p>'+array.object.textField1+
                        '</p><p>'+array.object.textField2+
                        '</p><p>'+array.object.textfield3+'</p>';

This shows up in a function which will run for each object in the array. Not all of the objects have content in all 3 text fields.

So is there an easy way to prevent 'undefined from being printed?

Right now I have this before the previous line:

if (!array.object.textfield1) {
    array.object.textfield1 = ' ';
}
if (!array.object.textfield2) {
    array.object.textfield2 = ' ';
}
if (!array.object.textfield3) {
    array.object.textfield3 = ' ';
}

But this is not a practical solution if there are a lot of variables that need to be checked.

I am appending text which is stored in a javascript variable into a div element. The issue is that the depending on the situation there may or may not be text stored in that variable. If there is not I end up with the text 'undefined' where the valid text would have been in the div.

so as an example:

htmlelement.innerhtml = '<h2>'+array.object.title+
                        '</h2><p>'+array.object.textField1+
                        '</p><p>'+array.object.textField2+
                        '</p><p>'+array.object.textfield3+'</p>';

This shows up in a function which will run for each object in the array. Not all of the objects have content in all 3 text fields.

So is there an easy way to prevent 'undefined from being printed?

Right now I have this before the previous line:

if (!array.object.textfield1) {
    array.object.textfield1 = ' ';
}
if (!array.object.textfield2) {
    array.object.textfield2 = ' ';
}
if (!array.object.textfield3) {
    array.object.textfield3 = ' ';
}

But this is not a practical solution if there are a lot of variables that need to be checked.

• javascript
• html
• variables
• undefined

• 1 just initialize the variable with an empty string when declaring it. – basilikum Commented Jul 6, 2013 at 21:44

4 Answers 4

Can you use the logical operator || ?

array.object.textField1||''

Note: Please do take care of values like 0 or any other falsy values .

Use "The New Idiot" answer this is here just fro an extra method.

The other answer is better because it molds the check into the logic ( a good thing!) and is better for performance.

with that said REGEX!!

htmlelement.innerText = htmlelement.innerText.replace('undefined', '');

check each array item to see if its undefined with the **typeof** operator.
for each array item if the **typeof** is **undefined** you can do eather 2 things:

1. set to default
2. remove with splice()

example:

    function cleanArray(theArray){
        for(i=0;i < theArray.length;i++){
            if(typeof theArray[i] == "undefined"){
                theArray[i]="";//OR SPLICE IT OU WITH splice()
            }
        }
    }
    //NOW CALL THIS FUNCTION EVERYTIME PASSING IT THE ARRAY
    cleanArray(arrayOfItems);

no simple way around this, you need to plan your design accordingly

"The New Idiot" answer is pretty good if you only have a few. If you have a more complicated object that you want to sort out, one option would be to iterate over the properties and set them to an empty string if they are undefined. e.g.

var o = {
    t1: undefined,
    t2: "hey"
};

for (prop in o) {
    if (o.hasOwnProperty(prop) && typeof o[prop] === "undefined") {
        o[prop] = "";
    }
}

jsFiddle: http://jsfiddle.net/Ca6xn/