How I can pass argument out of the loop in javascript

Question

this.jsonFetch = function() {
    for (person in this.persons) {
        console.log(person, '= ', this.persons[person]['title']);
        this.unorderList.innerHTML += "<li><a id='aid" + this.persons[person]['id'] + "'href='#' >" + this.persons[person]['title']['rendered'] + "</a></li>";

    }
    this.unorderListLi = document.getElementById("ul").getElementsByTagName("a");
    for ( l = 0; l <= this.unorderListLi.length; l++ ) {
        this.unorderListLi[l].addEventListener('click', function() { ajaxJsonFetchPost(965); }, false);
    }
}

I want to pass dynamic id argument this.unorderListLi[l].addEventListener('click', function() { ajaxJsonFetchPost(this.persons[person]['id']); }, false); instead of manual id (965). but it is out of the loop. Can anyone tell me what is the actual process? Thanks.

Answer 1

Since you are attaching the eventListener directly to the element, then you can access the attribute of the element itself under the Event.target attribute which should contains your id .

this.unorderListLi[l].addEventListener('click', 
    function(e) { 
      ajaxJsonFetchPost(e.target.getAttribute('id').slice(3)); // slice(3) to pick the number after "aid" string in id
    }, false);

Answer 2

You already have the id stored as part of the element to which the click handler is associated.

this.unorderListLi[l].addEventListener('click', function() {
  var idAttr = this.id;
  ajaxJsonFetchPost(idAttr.split('aid')[1]);
}, false);

Answer 3

If you want each person's li elements to have event listeners, you need to nest the loops. Also use var in front of person and l , otherwise you are making global variables! Make sure to use this.persons instead of persons inside jsonFetch() .

this.jsonFetch = function() {
    for (var person in this.persons) {
        console.log(person, '= ', this.persons[person]['title']);
        this.unorderList.innerHTML += "<li><a id='aid" + this.persons[person]['id'] + "'href='#' >" + this.persons[person]['title']['rendered'] + "</a></li>";

        this.unorderListLi = document.getElementById("ul").getElementsByTagName("a");
        for (var l = 0; l <= this.unorderListLi.length; l++ ) {
            addEvt(this.unorderListLi[l], this.persons[person]['id']);
        }
    }
}

function addEvt(obj, id) {
    obj.addEventListener('click', function() {
        ajaxJsonFetchPost(id);
    }, false);
}