How do I loop through an array with multiple objects and list certain elements in solely Javascript?

Question

This is the code I have written. I want the listContacts function to loop through the contacts array and log the first and last name of each contact to the console. When I run this though it only logs John Doe to the console. What am I missing here?

var contacts = [ 
  { 
    firstName : 'John',
    lastName : 'Doe',
    phone : '(512) 355-0453',
    email : '[email protected]'
  },
  { 
    firstName : 'Jane',
    lastName : 'Doe',
    phone : '(313) 641-2203',
    email : '[email protected]'
  },
  { 
    firstName : 'Suzie',
    lastName : 'Smith',
    phone : '(415) 604-4219',
    email : '[email protected]'
  }
];  

   var listContacts = function () {
   for (var i = 0; i <= contacts.length; i++) {
   return contacts[i].firstName + ' ' + contacts[i].lastName;
   }
};

console.log(listContacts());

You should not return in the first iteration of your loop, as that way you never get any other iterations of that loop. — trincot
– trincot, Commented Oct 16, 2016 at 19:35
Just FYI, your condition should be i < contacts.length, not <=. — user1106925
– user1106925, Commented Oct 16, 2016 at 19:38
for (let c of contacts) console.log( c.firstName + ' ' + c.lastName ); — Tibrogargan
– Tibrogargan, Commented Oct 16, 2016 at 19:41
console.log(contacts.reduce( (p,e) => { return p+e.firstName+' '+e.lastName+"\n" }, "") ); — Tibrogargan
– Tibrogargan, Commented Oct 16, 2016 at 19:56

krillgar · Accepted Answer · 2016-10-16 23:39:13Z

5

Your return statement in your for loop is causing that loop to stop after the first iteration. Instead, you should log within the loop:

var listContacts = function () {
    for (var i = 0; i < contacts.length; i++) {
        console.log(contacts[i].firstName + ' ' + contacts[i].lastName);
    }
}

listContacts();

edited Oct 16, 2016 at 23:39

answered Oct 16, 2016 at 19:36

krillgar

12.9k6 gold badges56 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gBasgaard Over a year ago

I see. Thank you so much for your speedy answer!

trincot · Accepted Answer · 2016-10-16 19:39:13Z

3

Your return inside the loop construct will make your function exit immediately, so your loop will never iterate more than once. Therefore you only get to see the first entry. Instead collect the names in an array, and return that:

var listContacts = function () {
    var result = [];
    for (var i = 0; i < contacts.length; i++) {
        result.push(contacts[i].firstName + ' ' + contacts[i].lastName);
    }
    return result;
}
// Turn the array to string by joining with a newline character:
console.log(listContacts().join('\n'));

A more compact way to do this, is with this ES6 code:

var listContacts = function () {
    return contacts.map(c => c.firstName + ' ' + c.lastName);
}
// Turn the array to string by joining with a newline character:
console.log(listContacts().join('\n'));

answered Oct 16, 2016 at 19:39

trincot

357k38 gold badges282 silver badges338 bronze badges

1 Comment

gBasgaard Over a year ago

I'm a beginner at this if you couldn't notice ;) Thanks for the clear explanation!

Sreekanth · Accepted Answer · 2016-10-16 19:38:45Z

2

You are returning in your for loop and when the for loop executes, it sees a return statement and exits the function without executing the remaining elements of the array.

Here is something you could do:

var contacts = [{
  firstName: 'John',
  lastName: 'Doe',
  phone: '(512) 355-0453',
  email: '[email protected]'
}, {
  firstName: 'Jane',
  lastName: 'Doe',
  phone: '(313) 641-2203',
  email: '[email protected]'
}, {
  firstName: 'Suzie',
  lastName: 'Smith',
  phone: '(415) 604-4219',
  email: '[email protected]'
}];

var listContacts = function() {
  return contacts.map(function(contact) {
    return contact.firstName + " " + contact.lastName
  })
};

console.log(listContacts());

answered Oct 16, 2016 at 19:38

Sreekanth

3,13014 silver badges22 bronze badges

Collectives™ on Stack Overflow

How do I loop through an array with multiple objects and list certain elements in solely Javascript?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related