CODEWITHSUNDEEP
javascriptjqueryhtml
user1866925
user1866925

Reputation: 356

Getting undefined when trying to fetch an ID from a data attribute

I can't figure out why am I getting undefined when trying to console.outthe iUsedId variable from the code below.

Here I attatch the user id to data-iUserId.

var aUsers = [];            
            for( var i = 0; i < aUsers.length; i++ ){
                $("#lblUsers").append('<tr><th scope="row">'+aUsers[i].id+'</th><td>'+aUsers[i].username+'</td><td>'+aUsers[i].firstName+'</td><td>'+aUsers[i].lastName+'</td><td>'+aUsers[i].email+'</td><td>'+"<span data-iUserId='"+aUsers[i].id+"'</span><input type='checkbox' id='chk_"+i+"'"+'</td></tr>');
            }

And here I am trying to use the data from the data attribute, but in the console all I get is undefined.

$(document).ready(function() {
    $("#remove").on("click", function() {
        $('input:checked').each(function() {
            $(this).closest('tr').remove();
            var iUserId = $(this).attr('data-iUserId');
            console.log(iUserId);
            for (var i = 0; i < aUsers.length; i++) {
                if (iUserId == aUsers[i].iUsersId) {
                    aUsers.splice(i, 1);
                }
            }
        });
    });

});

Any gueses? Please help!

Upvotes: 0

Views: 961

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

var aUsers = [];
//...somehow populate array...
// We have to assume here that the array got populated 
for (var i = 0; i < aUsers.length; i++) {
  $("#lblUsers").append('<tr><th scope="row">' + aUsers[i].id + '</th><td>' + aUsers[i].username + '</td><td>' + aUsers[i].firstName + '</td><td>' + aUsers[i].lastName + '</td><td>' + aUsers[i].email + '</td><td>' + "<span data-iUserId='" + aUsers[i].id + "'></span><input type='checkbox' id='chk_" + i + "'" + '</td></tr>');
}

$(document).ready(function() {
  $("#remove").on("click", function() {
    $("#lblUsers").find('input[type="checkbox"]:checked').each(function() {
      // fixed to get the element with the data
      var iUserId = $(this).siblings('[data-iUserId]').data('iuserid');
      console.log(iUserId);
      for (var i = 0; i < aUsers.length; i++) {
        // bad practice to use a global aUsers
        if (iUserId == aUsers[i].iUsersId) {
          aUsers.splice(i, 1);
        }
      }
      $(this).closest('tr').remove();
    });
  });
});

Upvotes: 1

meditari
meditari

Reputation: 141

The reason is you are looping over the checkboxes and not the span's which have the attribute you are trying to access.

$(this) refers to the checkbox and not the span in the each method you are using:

 $('input:checked').each(function() { 
     // Inside this each statement $(this) refers 
     // to the the current 'input:checked' element being accessed
 });

You should put the data-iUserId attribute on the checkbox since you are accessing that element.

Also! You are missing the closing '>' on the opening span tag:

<span data-iUserId='"+aUsers[i].id+"'</span>

Upvotes: 1

Mojtaba
Mojtaba

Reputation: 5004

You are deleting the parent with the containers, then trying to access the element.

removing the parent should be in the last step:

$(document).ready(function() {
    $("#remove").on("click", function() {
        $('input:checked').each(function() {
            var iUserId = $(this).closest('span').attr('data-iUserId');
            console.log(iUserId);
            for (var i = 0; i < aUsers.length; i++) {
                if (iUserId == aUsers[i].iUsersId) {
                    aUsers.splice(i, 1);
                }
            }
            $(this).closest('tr').remove();
        });
    });

});

Also, consider the comment of @pBuch

Upvotes: 1

Related Questions