покажите строку таблицы, если id находится в массиве с jQuery

Question

У меня следующая проблема, я не знаю, как ее решить.

У меня есть раскрывающееся меню и таблица, и если выбран один элемент раскрывающегося списка, в таблице должны отображаться только элементы.которые находятся в этой группе.

данные поступили из внешней службы и будут обновляться каждую минуту, вызывая vehicleShowHide(); и refreshTable(); (получить данные таблицы и создать таблицу).

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

раскрывающийся список:

<select class="custom-select custom-select-sm" onchange="showVehicleGroup(value)">
    <option value="" selected="">Alle Gorups</option>
    <option value="1-44060-041414BE3">Alle Vehicle (101)</option>
    <option value="1-44060-5211861A0">Group1 (42)</option>
    <option value="1-44060-477E11472">Group2 (3)</option>
    <option value="1-44060-4774E43D7">Group4 (23)</option>
    <option value="1-44060-288B143F2">Group5 (3)</option>
    <option value="1-44060-730090EA1">Group6 (6)</option>
</select>

таблица (упрощенная):

<table id="vehicleTable" class="table table-hover table-sm">
<thead>
</thead>
  <tbody id="vehicleTableBody">
      <tr id="102">
          <td>Text</td>
      </tr>
      <tr id="103">
          <td>Text</td>
      </tr>
      <tr id="104">
          <td>Text</td>
      </tr>
      <tr id="105">
          <td>Text</td>
      </tr>
      <tr id="106">
          <td>Text</td>
      </tr>
  </tbody>
</table>

jQuery:

function showVehicleGroup(value) {

if (groupFilterArray.length === 0) {
    // do nothing
} else {
    groupFilterArray = [];
}

$(vehicleObjectsArray).each(function(key, element) {

    if (element.objectgroupuid === value) {

        groupFilterObject = element.objectno

        groupFilterArray.push(groupFilterObject);

    } else {
        // do nothing
    }
});

vehicleShowHide();
}

function vehicleShowHide() {

groupFilterArray = [ "103", "105", "106" ];

$('#vehicleTable').each(function() {

 // here I do not know how to compare the groupFilterArray with the table rows by id
    if () {
        $('#vehicleTable tbody tr#id').show();
    } else {
        $('#vehicleTable tbody tr').hide();
    }

});

внешний json (извлечение):

[
 {
  "objectgroupname": "Group1",
  "objectno": "102",
  "objectname": "xxxxx",
  "objectuid": "1-44060-53078611D",
  "objectgroupuid": "1-44060-041414BE3"
 },
 {
  "objectgroupname": "Group2",
  "objectno": "103",
  "objectname": "xxxxx",
  "objectuid": "1-44060-3236707EF",
  "objectgroupuid": "1-44060-477E11472"
 }
]

Answer 1

Вы можете также использовать метод indexOf и циклы, которые также должны быть изменены.

т.е.;

 var groupFilterArray = [ "103", "105", "104" ];
 $('#vehicleTable #vehicleTableBody tr').each(function() {

    var rowId = $(this).attr("id");
        if (groupFilterArray.indexOf(rowId) != -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

Попробуйте этот код и дайте нам знать, работает ли он.Вот рабочий fiddle И вот фрагмент кода, который вы можете выполнить и увидеть результат.

 var groupFilterArray = [ "103", "105", "106" ];
 $('#vehicleTable #vehicleTableBody tr').each(function() {
    
    var rowId = $(this).attr("id");
        if (groupFilterArray.indexOf(rowId) != -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="vehicleTable" class="table table-hover table-sm">
<thead>
</thead>
  <tbody id="vehicleTableBody">
      <tr id="102">
          <td>Text 102</td>
      </tr>
      <tr id="103">
          <td>Text 103</td>
      </tr>
      <tr id="104">
          <td>Text 104</td>
      </tr>
      <tr id="105">
          <td>Text 105</td>
      </tr>
      <tr id="106">
          <td>Text 106</td>
      </tr>
  </tbody>
</table>