Get object value through a click event after each loop

Question

I'm running an each loop over a JSON file that fetches objects corresponding to a click event on a button(.region) and then conditioning with an if statement.

There's no problem doing so without the click event, using it and trying to get the object just outputs undefined.

How can I make this happen using the following:

Object:

var data = {
    "employees": [{
            "title": "Jay Rob",
            "region": "IL",
            "startDate": "2016-12-06"
        }, {
            "title": "John Doe",
            "region": "UK",
            startDate ": "2016-12-06"

        }
    ]
}

JS:

$(document).ready(function() {
    $(data.employees).each(function() {
            var date = "2016-12-06";
            var reg = "IL";

            if (this.startDate == date) {

                $('#emp-main').append('<div class="emp-box"><h2>' + this.title + '</h2><span>' + this.region + '</span>');
                // Works like it should!
            }

            $(".region").click(function() {
                    //an if statement here, taking the current object from the loop, comparing it to the variable region and startDate and outputting HTML. Would not work because of the scope.
                    if (data.employees.region == reg && data.employees.starDate == date) {
                        $('#emp-main').append('<div class="emp-box"><h2>' + this.title + '</h2><span>' + this.region + '</span>');
                        //returns undefined
                    });
            });

    });
});

You should not apply an event handler inside an $.each loop, that will bind it multiple times to the same element — empiric
– empiric, Commented Dec 6, 2016 at 21:06
this.title is no longer within the scope when you bind your click event. Create a new variable: var that = this; and recall it in your click event: that.title. Else bind it to the window object. — Daerik
– Daerik, Commented Dec 6, 2016 at 21:14
You should use $.each() to loop over an array. $(...).each() is for looping over DOM elements that match the selector in $(...). — Barmar
– Barmar, Commented Dec 6, 2016 at 22:18

Abdelrahman M. Allam · Accepted Answer · 2016-12-06 22:23:02Z

1

You are accessing data.employees.region this will give you undefined for sure, since data.employees is array you need to specify the index you want to access first, use $.each will send one by one like so

  $(data.employees).each(function(i, employee) {
        // then access region 
     employee.region
 });

after all you will face that getting the last object on all the buttons click so you need to isolate the scope with IIFE

  $(data.employees).each(function(i, employee) {
        // here scope for $.each
        // will affect the $.click scope 
        // because they use the same variable 
        // and $.each ends but the scope still accessible by $.click function 
    (function(emp){
         $(".region").click(function() {
        // because the $.click will be called later 
        // can see what $.each scope last value 

        // to avoid clash with the outer scope of .each
        // passed to function IIFE
        // and this act as eval the value of the variable directly on
        // declare it

             emp.region


         });
    }(employee));
 });

edited Dec 6, 2016 at 22:23

answered Dec 6, 2016 at 21:17

Abdelrahman M. Allam

92210 silver badges17 bronze badges

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

2 Comments

Ozzy Over a year ago

I'm trying to understand the logic, you're going through data.employees and you pass to the each function the var i and employee, for what purpose? after that you run IIFE and you pass to it the same employee var on the top and the bottom, what does that mean?

Abdelrahman M. Allam Over a year ago

you may confused because the same variable name is used bu to clear it when it passed to function it go to different scope

Collectives™ on Stack Overflow

Get object value through a click event after each loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related