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', 'christian@example.com', '323-555-124');
var rich = new ContactList('Rich', 'rich@example.com', '323-555-124');
var scott = new ContactList('Scott', 'scott@example.com', '323-555-124');
var danny = new ContactList('Danny', 'danny@example.com', '323-555-124');
var taka = new ContactList('Taka', 'taka@example.com', '323-555-124');
var tim = new ContactList('Tim', 'tim@example.com', '323-555-124');
var patrick = new ContactList('Patrick', 'patrick@example.com', '323-555-124');
var jacques = new ContactList('Jacques', 'jacques@example.com', '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. http://jsfiddle.net/xynoadd8/ — Sebastian Nette, Jul 19 '15 at 04:58
Probably the same way as you already did. As seen in the fiddle, the console.log shows the correct output. — Sebastian Nette, Jul 19 '15 at 05: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, Jul 19 '15 at 05:20

Michael Geary · Accepted Answer · 2015-07-19T08:55:23.993

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', 'christian@example.com', '323-555-124'),
    new ContactItem('Rich', 'rich@example.com', '323-555-124'),
    new ContactItem('Scott', 'scott@example.com', '323-555-124'),
    new ContactItem('Danny', 'danny@example.com', '323-555-124'),
    new ContactItem('Taka', 'taka@example.com', '323-555-124'),
    new ContactItem('Tim', 'tim@example.com', '323-555-124'),
    new ContactItem('Patrick', 'patrick@example.com', '323-555-124'),
    new ContactItem('Jacques', 'jacques@example.com', '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

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 http://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, Jul 19 '15 at 08:12
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? — Sai, Jul 19 '15 at 08:23
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, Jul 19 '15 at 08:47
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? — Michael Geary, Jul 19 '15 at 08:57
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, http://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? — Sai, Jul 19 '15 at 11:53

monkey · Answer 2 · 2015-07-19T05:41:16.510

-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 '15 at 05:41

answered Jul 19 '15 at 05:03

monkey

1,279
14
15

thanks for the alternative method but my issue is with selecting any name from that list to use in a click function – Sai Jul 19 '15 at 05:22
I've changed the example – monkey Jul 19 '15 at 05:39

score -1 · Answer 3 · edited Jul 19 '15 at 08:54

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', 'christian@example.com','');
     var rich = new ContactList('Rich', 'rich@example.com', '323-555-124');
     var scott = new ContactList('Scott', 'scott@example.com', '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);

}

so how would you select all the name from that list to use with a click? — Sai, Jul 19 '15 at 05:24

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

3 Answers3