Filtering JSON multidimensional array using jQuery Grep

Question

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);
});

76484 · Accepted Answer · 2023-02-04 05:10:38Z

1

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.

edited Feb 4, 2023 at 5:10

answered Feb 4, 2023 at 4:51

76484

9,0013 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Never Stop Learning Over a year ago

Perfect! This is what I've been looking for. Thank you so much for your output. Really appreciate it and noted on the requirements on filter using javascript.

Collectives™ on Stack Overflow

Filtering JSON multidimensional array using jQuery Grep

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related