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.
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 );
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments