Появляются из массива объектов

Question

Я пытаюсь определить, как удалить одну или несколько указанных c строк из массива объектов.

На странице у меня есть текстовое поле для ввода пользователем идентификатора пользователя; нажмите кнопку «Найти», и я выполню поиск в AD и добавлю в таблицу строку с отображаемым именем пользователя и идентификатором пользователя. В дополнение к этому, для дальнейшей обработки я храню в массиве объектов некоторую информацию о пользователе в дополнение к отображаемому имени и идентификатору пользователя.

Кроме того, в приведенной выше таблице есть флажок, который пользователь может выбрать и удалить одного или нескольких добавленных пользователей; Я могу правильно перестроить таблицу, отображающую данные, но не знаю, как на этом этапе удалить одну или несколько строк из массива (т.е. удаленных пользователей).

Вот что у меня есть:

HTML:

<table class="adminList" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>User Name</th>
            <th>User ID</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<button type="button" class="btn-primary btn-sm delete-admin-row">Delete User(s)</button>

JS / jQuery:

var admins = [];

<Somehow, using ajax, get user's data from AD>

var fn = userData.FirstName;
var mi = userData.Initial;
var ln = userData.LastName;
var name = userData.DisplayName;
var email = userData.Email;
var userid = userData.UserID;

//push the object onto the array
admins.push({
    "fn" : fn,
    "mi" : mi,
    "ln": ln,
    "email": email,
    "userid": userid
});
// Display in admins list
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + userid + "</td></tr>";
$(".adminList tbody").append(markup);

ДАЛЕЕ ВНУТРИ КОДА:

$(document).ready(function(){
    $(".delete-admin-row").click(function(){
        $(".adminList tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();

                //  HERE I NEED TO POP THE ARRAY
            }
        });
    });
});

Не уверен, что при удалении отметьте столбец и, имея вместо этого изображение «x» рядом с каждой строкой, свяжите некоторое свойство пользовательских данных с этим изображением «x», скажем ID пользователя, как «data-xxx», и доступ к нему в функции удаления будет проще; но я все еще не знаю, как получить доступ и удалить строку из массива на основе 'userid'.

Обновление

Следуя внесенным предложениям, я внес изменения но заметил, что IE не понимает => и findIndex. Итак, я внес следующие изменения, но все равно получаю -1 в качестве возвращаемого индекса.

$(".delete-admin-row").click(function(){
    $(".adminList tbody").find('input[name="record"]').each(function(){
        if($(this).is(":checked")){debugger
            $(this).parents("tr").remove();

            // Both of these return the userid
            const useridToFind1 = this.dataset.userid;
            const useridToFind = $(this).closest("tr").find("td:eq(2)").text();

            //const index = admins.findIndex(admin => admin.userid === useridToFind);
            const index = admins.indexOf(function (e) { return e.userid === useridToFind });

            if (index !== -1) {    // Always -1
                admins.splice(index, 1);
            }
        }
    });
});

Answer 1

Я бы добавил UserID к атрибуту данных input в TR, чтобы при переборе проверенных входов вы могли принять это значение и использовать .findIndex, чтобы проверить, соответствует ли UserID Объект существует в массиве. Тогда вы можете splice it:

var markup = "<tr><td><input data-userid='" + userid + "' type='checkbox' name='record'></td><td>" + name + "</td><td>" + userid + "</td></tr>";

и

$(".delete-admin-row").click(function(){
  $(".adminList tbody").find('input[name="record"]:checked').each(function(){
    $(this).parents("tr").remove();
    const useridToFind = Number(this.dataset.userid);
    const index = admins.findIndex(admin => admin.userid === useridToFind);
    if (index !== -1) {
      admins.splice(index, 1);
    }
  });
});

Я предполагаю, что идентификатор пользователя является числом, поэтому необходимость в приведении типа в .find ( так как элемент dataset всегда будет строкой).

Если вам нужно использовать устаревший 7-летний браузер, не используйте синтаксис и используйте другой метод итерации:

"use strict";

$(".delete-admin-row").click(function() {
  $(".adminList tbody")
    .find('input[name="record"]:checked')
    .each(function() {
      $(this)
        .parents("tr")
        .remove();
      var useridToFind = Number(this.dataset.userid);
      var foundIndex = -1;
      admins.forEach(function(admin, index) {
        if (admin.userid === useridToFind) foundIndex = index;
      });
      if (index !== -1) {
        admins.splice(index, 1);
      }
    });
});

Answer 2

Получить идентификатор пользователя из третьего <td> в текущей строке. Найдите индекс элемента массива с этим идентификатором пользователя и удалите его с помощью splice().

$(document).ready(function() {
  $(".delete-admin-row").click(function() {
    $(".adminList tbody").find('input[name="record"]').each(function() {
      if ($(this).is(":checked")) {
        let userid = $(this).closest("tr").find("td:eq(2)").text();
        let index = admins.findIndex(el => el.userid == userid);
        if (index >= 0) {
          admins.splice(index, 1);
        }
        $(this).parents("tr").remove();
      }
    });
  });
});

Answer 3

Просто используйте метод splice, что вам нужно знать - индекс массива (первый элемент - 0)

var a = [1, 2, 3, 4, 5];
a.splice(1, 2); // delete 2 elements starting from second element 
// (second, because first element in array has index - 0, 
// so index 1 - it's second element)

// a will contain -> [1, 4, 5]