Html Question posted in
Some basic documentation can be found here.

Html – Filter JSON object in nested array in javascript not working properly

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

Tags:

3

Answers


  1. 0 
    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

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

    1. 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.
    2. 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));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search