Filter JSON object in nested array in javascript not working properly

Question

I am trying to implemenet a search input filter inside drop down which contains nested dropdown list items. My JSON data which I am getting from api as response given below

API response

glPlmAsmt.category = {
    "page_size": 100,
    "total": 5,
    "size": 5,
    "page_offset": 0,
    "items": [
        {
            "name": "Program Governance",
            "status": "active",
            "id": "PL-Ca3d6c3bf060",
            "created_by": "191ad6043e2e",
            "created_time": 1535619902.0,
            "subcategories": [
                {
                    "name": "Risk & Issue Management",
                    "status": "active",
                    "id": "PL-Ca9ab6aed051",
                    "created_by": "191ad6043e2e",
                    "created_time": 1543489628.0,
                    "subcategories": []
                },
                {
                    "name": "Process & Tools",
                    "status": "active",
                    "id": "PL-Ca1fd776d743",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565863427.0,
                    "subcategories": []
                },
                {
                    "name": "Planning",
                    "status": "active",
                    "id": "PL-Caeb46a6dce6",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620426.0,
                    "subcategories": []
                },
                {
                    "name": "Monitoring & Tracking",
                    "status": "active",
                    "id": "PL-Caeb46a6d1b2",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620426.0,
                    "subcategories": []
                },
                {
                    "name": "Compliance to Standards",
                    "status": "active",
                    "id": "PL-Ca0c8335afc6",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535621467.0,
                    "subcategories": []
                }
            ]
        },
        {
            "name": "Engineering Maturity",
            "status": "active",
            "id": "PL-Ca3891dbcd9c",
            "created_by": "191ad6043e2e",
            "created_time": 1535620156.0,
            "subcategories": [
                {
                    "name": "Requirements Management",
                    "status": "active",
                    "id": "PL-Ca53e3a3f610",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620405.0,
                    "subcategories": []
                },
                {
                    "name": "Technical Solution Management",
                    "status": "active",
                    "id": "PL-Ca6b44070713",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565863770.0,
                    "subcategories": []
                },
                {
                    "name": "Quality Assurance",
                    "status": "active",
                    "id": "PL-Cac7a654f1c9",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620387.0,
                    "subcategories": []
                },
                {
                    "name": "CI\/CD Management",
                    "status": "active",
                    "id": "PL-Ca7ba190bcca",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565863878.0,
                    "subcategories": []
                }
            ]
        },
        {
            "name": "Team Management",
            "status": "active",
            "id": "PL-Ca009c852e4a",
            "created_by": "191ad6043e2e",
            "created_time": 1535619879.0,
            "subcategories": [
                {
                    "name": "Technical Expertise",
                    "status": "active",
                    "id": "PL-Ca6c3344d6cf",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565864050.0,
                    "subcategories": []
                },
                {
                    "name": "Team Design",
                    "status": "active",
                    "id": "PL-Ca414304c958",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620904.0,
                    "subcategories": []
                },
                {
                    "name": "Team Engagement",
                    "status": "active",
                    "id": "PL-Cafe3fcd7218",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620895.0,
                    "subcategories": []
                },
                {
                    "name": "Team Fulfillment",
                    "status": "active",
                    "id": "PL-Ca59511f47d7",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565863978.0,
                    "subcategories": []
                },
                {
                    "name": "Domain Expertise",
                    "status": "active",
                    "id": "PL-Ca375bc31659",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620915.0,
                    "subcategories": []
                }
            ]
        },
        {
            "name": "Client Management",
            "status": "active",
            "id": "PL-Ca03453473e2",
            "created_by": "191ad6043e2e",
            "created_time": 1535619885.0,
            "subcategories": [
                {
                    "name": "Client Satisfaction",
                    "status": "active",
                    "id": "PL-Da414304c960",
                    "created_by": "PR-EmQR61tch032",
                    "created_time": 1535620904.0,
                    "subcategories": []
                },
                {
                    "name": "Stakeholder Management",
                    "status": "active",
                    "id": "PL-Ca7ff7f293a5",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535621056.0,
                    "subcategories": []
                },
                {
                    "name": "Value Strategy",
                    "status": "active",
                    "id": "PL-Ca632e3b4005",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535621083.0,
                    "subcategories": []
                },
                {
                    "name": "Contract Management",
                    "status": "active",
                    "id": "PL-Ca632e8a41a7",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535621083.0,
                    "subcategories": []
                }
            ]
        },
        {
            "name": "Financials",
            "status": "active",
            "id": "PL-Ca49906fcb17",
            "created_by": "191ad6043e2e",
            "created_time": 1535619853.0,
            "subcategories": [
                {
                    "name": "Revenue",
                    "status": "active",
                    "id": "PL-Ca873f87fde3",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620651.0,
                    "subcategories": []
                },
                {
                    "name": "Labor Expenses",
                    "status": "active",
                    "id": "PL-Ca5ecf370d0f",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620664.0,
                    "subcategories": []
                },
                {
                    "name": "Other Expenses",
                    "status": "active",
                    "id": "PL-Ca1b195c5dfe",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620679.0,
                    "subcategories": []
                }
            ]
        }
    ]
}

Now what I am trying to achieve is that I am trying to implement search on name property of subcategories such that if I enter keyword tec then it should show result object in which subcategories name contains keyword user entered, which like this

        {
            "name": "Engineering Maturity",
            "status": "active",
            "id": "PL-Ca3891dbcd9c",
            "created_by": "191ad6043e2e",
            "created_time": 1535620156.0,
            "subcategories": [
                {
                    "name": "Technical Solution Management",
                    "status": "active",
                    "id": "PL-Ca6b44070713",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565863770.0,
                    "subcategories": []
                }
            ]
        },
        {
            "name": "Team Management",
            "status": "active",
            "id": "PL-Ca009c852e4a",
            "created_by": "191ad6043e2e",
            "created_time": 1535619879.0,
            "subcategories": [
                {
                    "name": "Technical Expertise",
                    "status": "active",
                    "id": "PL-Ca6c3344d6cf",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565864050.0,
                    "subcategories": []
                }
            ]
        }

Javascript Code for filteration

    const groupList = glPlmAsmt.category;
    const lowerContains = (x, y) => x.toLowerCase().includes(y.toLowerCase());

    const searchKeyword = element;
    const groupFiltered = groupList.filter(item =>
      (item.name && lowerContains(item.name, searchKeyword)) ||
      (item.subcategories.some(subname => lowerContains(subname.name, searchKeyword)))
    );
    console.log(groupFiltered);

I referred this code from here, which is somewhat similar How to implement a Search inside a Nested Array of Objects?

However it is not working properly for this JSON data

point 2

Even if search is get implemented then how to search other items as the array will be modified in first search item.

I am stucked, kindly assist.

Thanks

Are you assigning the paging object to const groupList? I believe you want to assign the items of the paging object const groupList = glPlmAsmt.category.items? — Discobarry
– Discobarry, Commented Feb 19, 2024 at 7:35
Discobarry: yes i am assigning object to const groupList and want to assign the items of the paging object — Mohit Kumar Sharma
– Mohit Kumar Sharma, Commented Feb 19, 2024 at 7:39

Parth M. Dave · Accepted Answer · 2024-02-19 08:48:00Z

const category = {
    "page_size": 100,
    "total": 5,
    "size": 5,
    "page_offset": 0,
    "items": [
        {
            "name": "Program Governance",
            "status": "active",
            "id": "PL-Ca3d6c3bf060",
            "created_by": "191ad6043e2e",
            "created_time": 1535619902.0,
            "subcategories": [
                {
                    "name": "Risk & Issue Management",
                    "status": "active",
                    "id": "PL-Ca9ab6aed051",
                    "created_by": "191ad6043e2e",
                    "created_time": 1543489628.0,
                    "subcategories": []
                },
                {
                    "name": "Process & Tools",
                    "status": "active",
                    "id": "PL-Ca1fd776d743",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565863427.0,
                    "subcategories": []
                },
                {
                    "name": "Planning",
                    "status": "active",
                    "id": "PL-Caeb46a6dce6",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620426.0,
                    "subcategories": []
                },
                {
                    "name": "Monitoring & Tracking",
                    "status": "active",
                    "id": "PL-Caeb46a6d1b2",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620426.0,
                    "subcategories": []
                },
                {
                    "name": "Compliance to Standards",
                    "status": "active",
                    "id": "PL-Ca0c8335afc6",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535621467.0,
                    "subcategories": []
                }
            ]
        },
        {
            "name": "Engineering Maturity",
            "status": "active",
            "id": "PL-Ca3891dbcd9c",
            "created_by": "191ad6043e2e",
            "created_time": 1535620156.0,
            "subcategories": [
                {
                    "name": "Requirements Management",
                    "status": "active",
                    "id": "PL-Ca53e3a3f610",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620405.0,
                    "subcategories": []
                },
                {
                    "name": "Technical Solution Management",
                    "status": "active",
                    "id": "PL-Ca6b44070713",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565863770.0,
                    "subcategories": []
                },
                {
                    "name": "Quality Assurance",
                    "status": "active",
                    "id": "PL-Cac7a654f1c9",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620387.0,
                    "subcategories": []
                },
                {
                    "name": "CI\/CD Management",
                    "status": "active",
                    "id": "PL-Ca7ba190bcca",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565863878.0,
                    "subcategories": []
                }
            ]
        },
        {
            "name": "Team Management",
            "status": "active",
            "id": "PL-Ca009c852e4a",
            "created_by": "191ad6043e2e",
            "created_time": 1535619879.0,
            "subcategories": [
                {
                    "name": "Technical Expertise",
                    "status": "active",
                    "id": "PL-Ca6c3344d6cf",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565864050.0,
                    "subcategories": []
                },
                {
                    "name": "Team Design",
                    "status": "active",
                    "id": "PL-Ca414304c958",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620904.0,
                    "subcategories": []
                },
                {
                    "name": "Team Engagement",
                    "status": "active",
                    "id": "PL-Cafe3fcd7218",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620895.0,
                    "subcategories": []
                },
                {
                    "name": "Team Fulfillment",
                    "status": "active",
                    "id": "PL-Ca59511f47d7",
                    "created_by": "191ad6043e2e",
                    "created_time": 1565863978.0,
                    "subcategories": []
                },
                {
                    "name": "Domain Expertise",
                    "status": "active",
                    "id": "PL-Ca375bc31659",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620915.0,
                    "subcategories": []
                }
            ]
        },
        {
            "name": "Client Management",
            "status": "active",
            "id": "PL-Ca03453473e2",
            "created_by": "191ad6043e2e",
            "created_time": 1535619885.0,
            "subcategories": [
                {
                    "name": "Client Satisfaction",
                    "status": "active",
                    "id": "PL-Da414304c960",
                    "created_by": "PR-EmQR61tch032",
                    "created_time": 1535620904.0,
                    "subcategories": []
                },
                {
                    "name": "Stakeholder Management",
                    "status": "active",
                    "id": "PL-Ca7ff7f293a5",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535621056.0,
                    "subcategories": []
                },
                {
                    "name": "Value Strategy",
                    "status": "active",
                    "id": "PL-Ca632e3b4005",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535621083.0,
                    "subcategories": []
                },
                {
                    "name": "Contract Management",
                    "status": "active",
                    "id": "PL-Ca632e8a41a7",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535621083.0,
                    "subcategories": []
                }
            ]
        },
        {
            "name": "Financials",
            "status": "active",
            "id": "PL-Ca49906fcb17",
            "created_by": "191ad6043e2e",
            "created_time": 1535619853.0,
            "subcategories": [
                {
                    "name": "Revenue",
                    "status": "active",
                    "id": "PL-Ca873f87fde3",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620651.0,
                    "subcategories": []
                },
                {
                    "name": "Labor Expenses",
                    "status": "active",
                    "id": "PL-Ca5ecf370d0f",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620664.0,
                    "subcategories": []
                },
                {
                    "name": "Other Expenses",
                    "status": "active",
                    "id": "PL-Ca1b195c5dfe",
                    "created_by": "191ad6043e2e",
                    "created_time": 1535620679.0,
                    "subcategories": []
                }
            ]
        }
    ]
};

const lowerContains = (x, y) => x.toLowerCase().includes(y.toLowerCase());

const searchKeyword = "tec";
const copyData=JSON.parse(JSON.stringify(category["items"])); // Point second 2
const groupFiltered =  copyData.filter(item => 
  (item.name && lowerContains(item.name, searchKeyword)) ||
  (item.subcategories.some(t => t.name && lowerContains(t.name, searchKeyword)))
);

console.log(groupFiltered);

I have normalize code & correct some syntax & for second time search it will filter original data so I have make copy of data before performing filter functionality

ShaiD · Accepted Answer · 2024-02-19 08:52:31Z

It seems to me that there are 2 issues with your current code:

You are trying to use .filter on an object, not an array. Your object has a property called 'category' and in it, a property called 'items', which is your array.
Your filter conditions are not structured correctly, having both && and || in the same sequence, which results in a wrong truthy value in some case.

You should try using parentheses over your conditions to group the correct parts together:

const groupList = glPlmAsmt.category;
const lowerContains = (x, y) => x.toLowerCase().includes(y.toLowerCase());

const searchKeyword = 'tec';
const groupFiltered = groupList.items.filter(item =>
(item.name && (lowerContains(item.name, searchKeyword) || item.subcategories.some(subname => lowerContains(subname.name, searchKeyword)))));
console.log(JSON.stringify(groupFiltered));

HassanShakur · Accepted Answer · 2024-02-19 09:12:35Z

You code is okay, only that since there are 2 filters involved, its logic becomes a bit complex. If the outer filter returns a true, the outer one does the same, therefore the entire category will be returned - no matter what condition you checked in the inner filter.

Therefore the only solution is to create another temporary array to hold the filteredCategories (those that match the search term), then loop over the categories using say a forEach, then inside it, filter the subCategories based on the search term. Since you only want categories and their subCategories (which match the search term), check if the filteredSubCategories length is > 0. If so, replace the category.subCategories array with the filteredSubCategories array and push this new category to the filteredCategories array. (Quite a mouthful)...

I would do something along these lines:

const lowerContains = (x, y) =>
  x.toLowerCase().includes(y.toLowerCase());

let filteredCategoryItems = [];

glPlmAsmt.category.items.forEach((item) => {
  const filteredSubCategories = item.subcategories.filter(
    (subCategory) => lowerContains(subCategory.name, searchTerm)
  );

  if (filteredSubCategories.length < 1) return;

  const filteredItem = {
    ...item,
    subcategories: filteredSubCategories,
  };

  filteredCategoryItems.push(filteredItem);
});

Hope it helps.

Collectives™ on Stack Overflow

Filter JSON object in nested array in javascript not working properly

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related