modifying html content on android phonegap application

Question

I have the following code which fetches all the contact from the device, and displays them in a table.

function backupAllTheContacts() {
var htmltd ;
var filter = ["displayName", "phoneNumbers", "emails"] ;  // Fields
navigator.contacts.find(filter, function(contacts) {
    //contactsList = JSON.stringify(contacts) ;
    alert('found ' + contacts.length + ' contacts') ;
    for (var i=0; i<contacts.length; i++) {
        htmltd += '<tr><td>' + contacts[i].displayName + '</td><td>' + contacts[i].phoneNumbers[0].value + '</td><td>' + contacts[i].emails[0].value + '</td></tr>' ;
    }
    if(htmltd == ''){
        alert('array population empty') ;
    }
    else{
        document.getElementById("tablebody").innerHTML = htmltd  ;
    }
}, onError, {"multiple": true});    

function onError(contactError){
   alert("Error = " + contactError.code);
}

}

Note: This Function is called when a button is clicked after the page has fully loaded

cordorva: cordova-3.1.0

Phonegap: phonegap-2.2.0

This works perfectly well on the virtual emulator, but when tested on a real device (tested on two android devices) It Fetches the contacts but the html content of 'tablebody' is not modified i tried

$('#tablebody').html(htmltd)

but still don't work. and no error appears in the console and also in logcat .

Answer 1

You do a very long concatenation inside the for :

htmltd += '<tr><td>' + contacts[i].displayName + '</td><td>' + contacts[i].phoneNumbers[0].value + '</td><td>' + contacts[i].emails[0].value + '</td></tr>' ;

Probably some of the fields are not present on the real device. Think about emails or phoneNumbers . You're accessing them statically assuming there's a zero-indexed value.

Javascript is probably throwing an undefined error.

Split that line in segments.