Фильтровать значение ключа JSON и назначать имена отображаемым элементам

Question

Если это дубликат, прошу прощения, я нигде не смог найти этот случай.

У меня есть вызов ajax, идущий на наш сервер ldap, который возвращает объект JSON, подобный этому: {groups: [{dn: "cn=test,ou=security,ou=groups,dc=company,dc=com", isDynamicGroup: true}] В ответе это то, что я вижу

{dn: "cn=test,ou=security,ou=groups,dc=company,dc=com", 
isDynamicGroup: true}
dn: "cn=test,ou=security,ou=groups,dc=company,dc=com"
isDynamicGroup: true

Я могу просто заполнять элементы DOM и стилизовать наш интерфейс, чтобы пользователи могли выбирать группы и загружать участников. Однако я пытаюсь отфильтровать isDynamicGroup: false и дать те, которые соответствуют отдельному идентификатору / классу для стиля. Главным образом, чтобы пользователи знали, что они не могут отправить пакет данных.

Это групповой вызов в ajax

//Display groups
$(function displayGroupItems() {
  $(document).on('click', '#ldap-tab', function(event) {
    $.ajax({
        url: 'ldap/groups',
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            $.each(data.groups, function(i, dn) {
                $('<li><a id="groupsList" class="panel-block dn-class">' + dn.dn + '</a></li>').appendTo('#groupSearchUl');
            });
        }
    })
  });
});

Сейчас объекты визуализируются

<div class="groupsList">
 <ul class="groupSearchUl">
  <li><a id="groupsList" class="panel-block dn-class">groupName</a> 
  </li>
 </ul>
 </div>

Хотелось бы увидеть

<div class="groupsList">
 <ul class="groupSearchUl">
  <li><a id="groupsList dynamicgroup" class="panel-block dn- 
   class">groupName</a> 
  </li>
 </ul>
 </div>

Answer 1

Чтобы отфильтровать группы, для которых isDynamicGroup имеет значение false, вы можете использовать:

var dynamicGroups = data.groups.filter(group => group.isDynamicGroup);

Если вы хотите просто назначить класс только для групп со свойством isDynamicGroup, установленным в true, вы можете использовать что-то вроде этого:

$(function displayGroupItems() {
    $(document).on('click', '#ldap-tab', function(event) {
        $.ajax({
            url: 'ldap/groups',
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                data.groups.forEach(function(group) {
                    var groupClass = "groupsList panel-block dn-class";
                    if (group.isDynamicGroup) {
                        groupClass += " dynamic-group";
                    }
                    $('<li><a class="' + groupClass + '">' + group.dn + '</a></li>').appendTo('#groupSearchUl');
                 });
            })
       });
 });

Answer 2

Если я понимаю, заменив ваш успешный обратный вызов на следующий, вы должны получить то, что хотите.

$.each(data.groups, function(i, dn) { $('<li><a id="groupsList" class="panel-block ' + (dn.isDynamicGroup ? 'dynamic-group' : '') + ' dn-class">' + dn.dn + '</a></li>').appendTo('#groupSearchUl'); });

Ссылка будет иметь класс dynamic-group, если это динамическая группа.