How to access an object property from an array of objects in a click handler?

Question

I have created a number of instances of a object constructor which I have placed into an array and looped over to display into a list. Now I want to select a name property from that list to use in an onclick event handler (not shown in this code). I would like to know how to access the name property in the click handler. This is what i have tried so far but i keep getting undefined.

console.log(contactarray[i].name);
console.log(contactarray.name);

code

$(document).ready(function() {

function ContactList (name, email, number,address) {
    this.name = name;
    this.email = email;
    this.number = number;
    this.address = '6539 Wilton Ave Culver City CA 90234';
}

var christian = new ContactList('Christian', '[email protected]', '323-555-124');
var rich = new ContactList('Rich', '[email protected]', '323-555-124');
var scott = new ContactList('Scott', '[email protected]', '323-555-124');
var danny = new ContactList('Danny', '[email protected]', '323-555-124');
var taka = new ContactList('Taka', '[email protected]', '323-555-124');
var tim = new ContactList('Tim', '[email protected]', '323-555-124');
var patrick = new ContactList('Patrick', '[email protected]', '323-555-124');
var jacques = new ContactList('Jacques', '[email protected]', '323-555-124');

var contactarray = [christian, rich, scott, danny, taka, tim, patrick, jacques];

for (i = 0; i < contactarray.length; i++) {
    $('#contacts').append('<li class="itemname" id="'+i+'"><a href="#">' + contactarray[i].name + '</a></li>');
}

My issue is getting access to the name property of one of the list items when it is clicked.

Code works fine. Must be an other issue. jsfiddle.net/xynoadd8 — Sebastian Nette
– Sebastian Nette, Commented Jul 19, 2015 at 4:58
Probably the same way as you already did. As seen in the fiddle, the console.log shows the correct output. — Sebastian Nette
– Sebastian Nette, Commented Jul 19, 2015 at 5:12
in the scenario where I have outputted my list and I want to click on any name to do something, my issue is how to select it and use it with a click? sorry for all the questions — Sai
– Sai, Commented Jul 19, 2015 at 5:20

Michael Geary · Accepted Answer · 2015-07-19 08:55:23Z

3

What you've run into is the classic problem with asynchronous JavaScript events in a loop. This was not apparent from your question because it didn't have a click handler anywhere, but it became obvious from your subsequent comment. Always provide enough information in a question to reproduce the actual problem. Simplified code is good, but not when the essential problem area is simplified out!

The easiest solution is to call a function for each loop iteration. Each time you call a function, it creates a "closure" which captures all the parameters and local variables in that function, even for asynchronous code like a click handler which gets called later.

Since you're using jQuery, you can do that with $.each(), or you could create and call a function of your own in a for loop, as long as you call it for every loop iteration.

Here's a working solution. I also simplified your code a bit by putting the contact items directly inside the array instead of creating a named variable for each one. And I changed the name of your ContactList constructor to ContactItem because it represents an individual item and not a list:

function ContactItem( name, email, number,address ) {
    this.name = name;
    this.email = email;
    this.number = number;
    this.address = '6539 Wilton Ave Culver City CA 90234';
}

var contactarray = [
    new ContactItem('Christian', '[email protected]', '323-555-124'),
    new ContactItem('Rich', '[email protected]', '323-555-124'),
    new ContactItem('Scott', '[email protected]', '323-555-124'),
    new ContactItem('Danny', '[email protected]', '323-555-124'),
    new ContactItem('Taka', '[email protected]', '323-555-124'),
    new ContactItem('Tim', '[email protected]', '323-555-124'),
    new ContactItem('Patrick', '[email protected]', '323-555-124'),
    new ContactItem('Jacques', '[email protected]', '323-555-124')
];

var $contacts = $('#contacts');

$.each( contactarray, function( i, contact ) {
    var $contact = $(
        '<li class="itemname" id="' + i + '">' +
            '<a href="#">' + contact.name + '</a>' +
        '</li>'
    );
    $contact.click( function() {
        alert( contact.name );
    }).appendTo( $contacts );
});

Updated fiddle

edited Jul 19, 2015 at 8:55

answered Jul 19, 2015 at 5:55

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

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

5 Comments

Sai Over a year ago

I am still a bit new to jQuery so i tried to call a function in a for loop but then my other function doesn't display, here is a link to a fiddle with my full code jsfiddle.net/eyk10fpe/1 my main objective is to click on a name and display that names email, number and address next to it. Why is it when i put my 1st for loop in a function and call it, both functions disappear? sorry for the hassle

Sai Over a year ago

I fixed the functions disappearing, i tried to edit but ran out of time. in your opinion what would be the best way to implement what i sugested?

Michael Geary Over a year ago

I'm not sure if I quite understand the latest question. But I notice that your latest code is back to using for loops instead of $.each(), and also it doesn't have any click handlers at all. I suggest comparing with the code I posted in my answer that has both of those things. If you do it the way that code does and add your new features to that, it should work.

Michael Geary Over a year ago

Also, let's use @example.com for all the email addresses, instead of addresses that might actually belong to real people. I edited your question and both answers to use @example.com addresses. When you make the next revision to your fiddle could you make the same change?

Sai Over a year ago

thanks for getting back to me, the emails are fake to begin with so no worries there. I don't fully understand what you did, this is still new to me so that's why I didn't use it, here is a updated fiddle, jsfiddle.net/eyk10fpe/3 I have commented my intentions for the code. so in the end for example if I click on scott it should display his email, number and address, same for anyone else. is there a way to implement this?

monkey · Accepted Answer · 2015-07-19 05:41:16Z

-1

Try replace

for (i = 0; i < contactarray.length; i++) {
    $('#contacts').append('<li class="itemname" id="'+i+'"><a href="#">' + contactarray[i].name + '</a></li>');
}

to

contactarray.forEach(function(contact, id) {
    $('#contacts').append('<li class="itemname" id="'+id+'"><a href="#" onclick="alert(' + contact.name + ')">' + contact.name + '</a></li>');
});

edited Jul 19, 2015 at 5:41

answered Jul 19, 2015 at 5:03

monkey

1,28114 silver badges15 bronze badges

2 Comments

Sai Over a year ago

thanks for the alternative method but my issue is with selecting any name from that list to use in a click function

monkey Over a year ago

<a href="#" onclick="alert(' + contact.name + ')"> I've changed the example

Michael Geary · Accepted Answer · 2015-07-19 08:54:10Z

-1

function ContactList (name, email, number,address) {
    this.name = name;
    this.email = email;
    this.number = number;
   this.address = '6539 Wilton Ave Culver City CA 90234';
}

window.onload = function() 
{
     var christian = new ContactList('Christian', '[email protected]','');
     var rich = new ContactList('Rich', '[email protected]', '323-555-124');
     var scott = new ContactList('Scott', '[email protected]', '323-555-');
     var contactarray = [christian, rich, scott];

     var btn = document.getElementById('btn');  

     btn.addEventListener('click',function(){
          for (i = 0; i < contactarray.length; i++) {
         $('#contacts').append('<li class="itemname" id="'+i+'"><a  href="#">' + contactarray[i].name + '</a></li>');
      }
     },false);

}

edited Jul 19, 2015 at 8:54

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

answered Jul 19, 2015 at 5:07

youssef mohamed

453 bronze badges

1 Comment

Sai Over a year ago

so how would you select all the name from that list to use with a click?

Collectives™ on Stack Overflow

How to access an object property from an array of objects in a click handler?

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related