如何使用jQuery Grep过滤JSON多维数组，获取含指定职位的部门

需求说明 #

• 目标：过滤JSON多维数组，当第二层（职位）元素满足条件时，获取对应的第一层（部门）数组数据
• 具体规则：
  1. 仅针对Marketing部门进行检查
  2. 若该部门下存在职位标题包含“FULL”的岗位，则返回整个Marketing部门的完整数据（包含该部门所有职位）

测试用JSON数据 #

{
  "departments": [
    {
      "id": 4009377006,
      "name": "Client Success",
      "parent_id": null,
      "child_ids": [],
      "jobs": []
    },
    {
      "id": 4009378006,
      "name": "Creative",
      "parent_id": null,
      "child_ids": [],
      "jobs": []
    },
    {
      "id": 4009379006,
      "name": "Engineering",
      "parent_id": null,
      "child_ids": [],
      "jobs": [
        {
          "absolute_url": "https://boards.greenhouse.io/frequence/jobs/4044313006",
          "data_compliance": [
            {
              "type": "gdpr",
              "requires_consent": false,
              "retention_period": null
            }
          ],
          "internal_job_id": 4034527006,
          "location": {
            "name": "Menlo Park, CA"
          },
          "metadata": [
            {
              "id": 4410278006,
              "name": "Desired Timezones",
              "value": [],
              "value_type": "multi_select"
            }
          ],
          "id": 4044313006,
          "updated_at": "2023-02-02T13:40:43-05:00",
          "requisition_id": "TEST101",
          "title": "TEST HIRING - SOFTWARE ENGINEER"
        }
      ]
    },
    {
      "id": 4009380006,
      "name": "Finance",
      "parent_id": null,
      "child_ids": [],
      "jobs": []
    },
    {
      "id": 4009381006,
      "name": "Marketing",
      "parent_id": null,
      "child_ids": [],
      "jobs": [
        {
          "absolute_url": "https://boards.greenhouse.io/frequence/jobs/4044533006",
          "data_compliance": [
            {
              "type": "gdpr",
              "requires_consent": false,
              "retention_period": null
            }
          ],
          "internal_job_id": 4034679006,
          "location": {
            "name": "Menlo Park, CA, or New York City, NY, or Washington DC"
          },
          "metadata": [
            {
              "id": 4410278006,
              "name": "Desired Timezones",
              "value": [],
              "value_type": "multi_select"
            }
          ],
          "id": 4044533006,
          "updated_at": "2023-02-02T13:40:43-05:00",
          "requisition_id": "TEST103",
          "title": "TEST HIRING - FULL STACK DEVELOPER"
        },
        {
          "absolute_url": "https://boards.greenhouse.io/frequence/jobs/4044315006",
          "data_compliance": [
            {
              "type": "gdpr",
              "requires_consent": false,
              "retention_period": null
            }
          ],
          "internal_job_id": 4034529006,
          "location": {
            "name": "Menlo Park, CA, or New York City, NY, or Washington DC"
          },
          "metadata": [
            {
              "id": 4410278006,
              "name": "Desired Timezones",
              "value": [],
              "value_type": "multi_select"
            }
          ],
          "id": 4044315006,
          "updated_at": "2023-02-02T13:40:43-05:00",
          "requisition_id": "TEST102",
          "title": "TEST HIRING - PHP DEVELOPER"
        }
      ]
    },
    {
      "id": 4009382006,
      "name": "Operations",
      "parent_id": null,
      "child_ids": [],
      "jobs": []
    },
    {
      "id": 4009383006,
      "name": "People",
      "parent_id": null,
      "child_ids": [],
      "jobs": []
    },
    {
      "id": 4009384006,
      "name": "Product",
      "parent_id": null,
      "child_ids": [],
      "jobs": []
    },
    {
      "id": 4009385006,
      "name": "Sales",
      "parent_id": null,
      "child_ids": [],
      "jobs": []
    },
    {
      "id": 0,
      "name": "No Department",
      "parent_id": null,
      "child_ids": [],
      "jobs": []
    }
  ]
}

当前问题代码 #

$.getJSON('https://boards-api.greenhouse.io/v1/boards/frequence/departments/', 
function(data) {
var search_term = 'FULL';
var search = search_term.toUpperCase();
var getDepartment = '';
var filterDept = $.grep(data.departments, function (element, index) {
var search_filter = element.name.toUpperCase().indexOf(search) >= 0; 
 console.log(element);

if(search_filter <= 0){
        // 我试图在此检查第二层数组中是否存在目标元素，若存在则获取父级数组
        filterDept = $.grep(element.jobs, function (element1, index1) {
  
            search_filter = element1.title.toUpperCase().indexOf(search) >= 0;  
            if(search_filter == true) { 
                search_filter = element.name.toUpperCase().indexOf(search) >= 0;  
                console.log(element1.title);
                return false; 
           
            }
            
        });
  
}
return search_filter;
});
   console.log(filterDept);
});

修正后的代码 #

$.getJSON('https://boards-api.greenhouse.io/v1/boards/frequence/departments/', 
function(data) {
    const searchTerm = 'FULL';
    const upperSearch = searchTerm.toUpperCase();
    // 过滤符合条件的部门
    const filteredDept = $.grep(data.departments, function(dept) {
        // 1. 先判断是否是Marketing部门
        const isMarketing = dept.name.toUpperCase() === 'MARKETING';
        if (!isMarketing) return false;
        
        // 2. 检查该部门下是否有职位标题包含目标关键词
        const hasMatchingJob = $.grep(dept.jobs, function(job) {
            return job.title.toUpperCase().includes(upperSearch);
        }).length > 0;
        
        // 只有同时满足两个条件，才返回该部门
        return hasMatchingJob;
    });
    
    console.log(filteredDept);
    // 这里可以添加展示逻辑，比如遍历filteredDept渲染部门和职位
});

代码说明 #

1. 逻辑分层清晰：先筛选出Marketing部门，再检查该部门下的职位是否符合关键词要求，避免逻辑混乱
2. 使用includes替代indexOf：代码可读性更强，直接判断是否包含目标字符串
3. 避免变量覆盖：原代码中错误地在内部$.grep里重新赋值filterDept和search_filter，导致逻辑出错，修正后保持变量作用域清晰
4. 明确返回条件：只有当部门是Marketing且存在匹配职位时，才将该部门加入结果集，完全符合需求

内容的提问来源于stack exchange，提问作者Never Stop Learning