javascript - 过滤 JSON 键值并为呈现的元素分配名称

Question

如果这是重复的，我很抱歉，我在任何地方都找不到这个案例。

我有一个 ajax 调用发送到我们的 ldap 服务器，它返回一个 JSON 对象，如下所示: {组: [{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 并为那些与单独的 ID/类匹配的样式提供匹配。主要是让用户知道他们无法发回数据。

这是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');
                 });
            })
       });
 });