Problem selecting correct value from array and assigning to variable

Question

Problem:

I am writing a tracking electron app where the user data is stored on a local JSON file. Essentially i have the cards (user info from json) loaded to display via html. My next step is to run the python backend, problem i am having is I currently can't load the correct array value, only the last one is currently loading into a variable that im trying to pass to python. Since im using forEach i shouldn't have to count or do i still need to do that?

What I expect to happen:

I want an alert to pop up with the current user.handle value. What happens now is it only pops up the last value in the array regardless of which card i press. How can i make each button press trigger the corresponding handle value?

When i test and swap out onclick="myFunction11()" with onclick=alert('${user.handle}') it prints the correct handle value. So i can assume i am just overwriting var city every time and left with the last one in the array. Any advice on how to correctly have myFunction11 pull the corresponding handle value i would love. thanks

Question:

How can i correctly have myFunction11 pull the correct handle value from the array? or is there a better way to achieve this?

Code:

  $(document).ready(function() {
   users.forEach(function(user) {
  $('.team').append(`<div class="card">
   <figure>
    <img src="${user.image}" />
     <figcaption>
      <h4>${user.name}</h4>
      <h5>${user.handle}</h5>
     </figcaption>
   </figure>
 <div class="links">
   <a href="#" onclick="myFunction11()"><i class="fa fa-pencil"></i></a>
   <a href="#"><i class="fa fa-truck"></i></a>
   <a href="modal"><i class="fa fa-trash-o"></i></a>
 </div>
 <div class="task">
   <div>

   </div>
 </div>
 <div class="bottom-links">
   <a href="#" onclick="myFunction11()"><i class="fa fa-pencil"></i> EDIT</a>
   <a href="#"><i class="fa fa-truck"></i> TRACK</a>
 </div>
 </div>
   <script>
 function myFunction11() {
   var city = '${user.handle}';
   alert(city);
 }
 </script>
 `);
   });

Possible duplicate of [Assign click handlers in for loop](https://stackoverflow.com/questions/4091765/assign-click-handlers-in-for-loop) — Alex Kudryashev, Apr 27 '19 at 19:37
This is common mistake in creating **handler in for-loop**. See https://stackoverflow.com/questions/4091765/assign-click-handlers-in-for-loop — Alex Kudryashev, Apr 27 '19 at 19:38
in the documentation for forEach seems like i dont need counting handler — duc hathaway, Apr 28 '19 at 02:14

suresh bambhaniya · Answer 1 · 2019-04-27T20:22:55.833

define function outside loop and pass user index as parameter

         function myFunction11(index) {
                    var city = users[index].handle;
                    alert(city);
         }    

         $(document).ready(function() {
                   users.forEach(function(user,i) {
                    $('.team').append(`<div class="card">
                     <figure>
                      <img src="${user.image}" />
                       <figcaption>
                        <h4>${user.name}</h4>
                        <h5>${user.handle}</h5>
                       </figcaption>
                     </figure>
                   <div class="links">
                     <a href="#" onclick="myFunction11(${i})"><i class="fa fa-pencil"></i></a>
                     <a href="#"><i class="fa fa-truck"></i></a>
                     <a href="modal"><i class="fa fa-trash-o"></i></a>
                   </div>
                   <div class="task">
                     <div>

                     </div>
                   </div>
                   <div class="bottom-links">
                     <a href="#" onclick="myFunction11(${i})"><i class="fa fa-pencil"></i> EDIT</a>
                     <a href="#"><i class="fa fa-truck"></i> TRACK</a>
                   </div>
                   </div>`);
             });
        });

I think this will not work since you are passing `user` in the onclick call. However, while `user` is a variable in this forEach loop that adds HTML and JS code, it will *not* be available when the onclick call happens. Right? — sborn, Apr 27 '19 at 19:51
Hi @suresh babhaniya - I think also this edit will not work. While the idea is good, your onclick will pass an unknown variable `i`. `i` is known at the time you append the HTML but it is not known when the click happens. It will however work this way: `onclick=myFunction11(${i})"`. The second question mark I have with your solution is if `users` will be available when the click happens. If it is, then it will work if you change the first line of `myFunction11` to `var city = users[index].handle;`. — sborn, Apr 27 '19 at 20:19
Yes! Provided that `users` is defined when the click happens I think this should work! — sborn, Apr 27 '19 at 20:48

score 0 · Answer 2 · answered Apr 27 '19 at 19:44

Adding duplicates of the same function is indeed bad practice. Your way when you have three users you will have defined function myFunction11 three times. And in fact (as you guessed) you end up with the function only having the last value of city.

Instead, this should be better:

$(document).ready(function() {

  $('.team').append(`<script>
      function myFunction11(city) {
        alert(city);
      }
    </script>`);

  users.forEach(function(user) {
    $('.team').append(`
       ...
 <a href="#" onclick="myFunction11('${user.handle}')"><i class="fa fa-pencil"></i></a>
      ...`);

});

Problem selecting correct value from array and assigning to variable

2 Answers2