Filtering JSON multidimensional array using jQuery Grep-CodePudding

I'm trying to filter the 2nd level of array and if it is true will get the 1st level array in JSON data. I'm using jQuery grep to find the specific element of an array and to filter the department and the jobs.title.

In my case I'm trying to search job title "FULL" and the data is under the department of Marketing. So I'm trying to achieve that if the data "FULL" exist under Marketing Department then Display Marketing Department Jobs.

For JSON file I'm using greenhouse API for testing.

   {
  "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": []
    }
  ]
}

This is what I've been working below.

$.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){
        // I'm trying to achieve here is to check if the element exist in 2nd level of array 
        //and if true it will retrieve the parent array or 1st level of array.
        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);
});

CodePudding user response：

Here is the way I would approach this:

const search_term = 'FULL';
const search = search_term.toUpperCase();

// Use helpful names like "department" and "job" instead of
// "element" and "element1" - this improves readability.
const matches = $.grep(data.departments, function (department) {
  const isMatch = department.name.toUpperCase().indexOf(search) >= 0;
  // Return `true` early if we have a direct name match.
  if (isMatch) { return true; }

  // If we haven't matched directly on name, we will filter
  // the department's jobs for matches.
  const jobMatches = $.grep(department.jobs, function (job) {
     return job.title.toUpperCase().indexOf(search) >= 0;
  });
  
  // We consider this department to be a match if its filtered
  // jobs has any elements (ie., its `.length` is greater than 0).
  return jobMatches.length > 0;
});

I have created a fiddle for reference.

Update I feel I should add that I used jQuery's grep function in my example only because it was mentioned in the question.

I would not use jQuery for this functionality because modern JavaScript has the methods on the Array prototype to do the filtering we require.

Here is an example in plain JavaScript:

const search_term = 'FULL';
const search = search_term.toUpperCase();

const matches = data.departments.filter(department => {
  const isMatch = department.name.toUpperCase().indexOf(search) >= 0;
  return isMatch || department.jobs.some(job => job.title.toUpperCase().indexOf(search) >= 0); 
});

And here is a fiddle that uses this code.