Why is the function not returning any values? It's returning [object object] or undefined instead

Question

I am learning JQuery and I'm trying to figure out why the following functions are not returning anything.

Here is the script:

function Person(name,country){
    this.name = name;
    this.country = country;
}
var addressBook = {
  contact: new Array(),
  totalContact: 0,
  newContact: "",
  addContact: function(newName, newCountry){
    this.totalContact += 1;
    this.newContact = new Person(newName, newCountry);
    this.contact[this.totalContact.length] = this.newContact;
  },
  getContactList1: function(){
    for(var key in this.contact){
      return key;
    }
  },
  getContactList2: function(){
    for(var key in this.contact){
        return this.contact[key];
    }
  },
  getContactList3: function(){
    for(var i = 0; i< this.totalContact.length; i++){
  
      if(this.contact[i]==="undefined"){
        return "What's wrong here?";
      }else{
        return this.contact[i];
      };
 }
  }
};
addressBook.addContact("HarryPotter","Philippines");
$('.addressBook').append("<div class='test'>Why is getContactList1 not returning the keys: <br /> "+addressBook.getContactList1()+"</div>");
addressBook.addContact("Melody","Philippines");
$('.addressBook').append("<div class='test'> What is causing this in getContactList2:<br /> "+addressBook.getContactList2()+"</div>");
$('.addressBook').append("<div class='test'> What is causing this in getContactList3:<br />"+addressBook.getContactList3()+"</div>");

.addressBook{
}
.test{
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addressBook"></div>

Instead it's giving feedbacks:

[object Object]

or

undefined

I will appreciate your help :)

I replaced the codepen reference by an inline snippet. Please take care to do this in future questions, as questions should have the necessary info for understanding the question embedded in it. — trincot, Oct 15 '16 at 19:11
While @trincot kindly brought your code into your question on this occasion in future please do this yourself; relying on an external resource to host your code leads to an incomprehensible, nonsensical, question in the future for other visitors should that link die, or URL change. It's in your own best interest to make your questions as easy to answer as possible, relying on us to follow an external link is not helpful for you, us, or - as noted - future visitors. — David Thomas, Oct 15 '16 at 19:11

score 0 · Accepted Answer · answered Oct 15 '16 at 19:25

In the first and third method variant you concatenate a Person object to a string with +. As you did not specify how to convert such an object to string it displays as [object Object], the default way any plain object is turned to string.

You can fix this by giving your Person objects a toString method.

The second and third method variant also have a problem, as they use this.totalContact.length, but that should be this.contact.length (totalContact is a number that does not have a length property).

So here is some working code (I did not change your output texts, so it does not make sense now ;-) ):

function Person(name,country){
    this.name = name;
    this.country = country;
    this.toString = function() { // added this function
        return JSON.stringify(this);        
    }
}

var addressBook = {
  contact: new Array(),
  totalContact: 0,
  newContact: "",
  addContact: function(newName, newCountry){
    this.totalContact += 1;
    this.newContact = new Person(newName, newCountry);
    this.contact[this.contact.length] = this.newContact; // error fixed.
  },
  getContactList1: function(){
    for(var key in this.contact){
      return key;
    }
  },
  getContactList2: function(){
    for(var key in this.contact){
        return this.contact[key];
    }
  },
  getContactList3: function(){
    for(var i = 0; i< this.contact.length; i++){ // error fixed.
      if(this.contact[i]==="undefined"){
        return "What's wrong here?";
      }else{
        return this.contact[i];
      };
 }
  }
};
addressBook.addContact("HarryPotter","Philippines");
$('.addressBook').append("<div class='test'>Why is getContactList1 not returning the keys: <br /> "+addressBook.getContactList1()+"</div>");
addressBook.addContact("Melody","Philippines");
$('.addressBook').append("<div class='test'> What is causing this in getContactList2:<br /> "+
addressBook.getContactList2()+"</div>");
$('.addressBook').append("<div class='test'> What is causing this in getContactList3:<br />"+
addressBook.getContactList3()+"</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addressBook"></div>

thank you @trincot you have a very good eyes and a brilliant mind..thank you for pointing out that I should be pointing to the contact array instead and not on the totalContact which doesn't have the length property. You are a hero :D I shall keep practicing! — mmahinay, Oct 16 '16 at 03:51
Thank you @trrincot I also learned about stringify today. For, anyone like me who's also learning. Herewith is another post related to stringify in stackoverflow [link] 9 — mmahinay, Oct 16 '16 at 04:08
[link](http://stackoverflow.com/questions/17785592/difference-between-json-stringify-and-json-parse) — mmahinay, Oct 16 '16 at 04:08

Why is the function not returning any values? It's returning [object object] or undefined instead

1 Answers1