Filtering an array of parent elements in Javascript based on a specific value found in

Question

Filtering an array of parent elements in Javascript based on a specific value found in

Trying to filter data from a 3-layer array based on child array values. Making progress but hitting a roadblock at the end.

{
    "id": 1,
    "grandparent": "Timmy",
    "parents": [
        {
            "id": 1,
            "parent": "Johnny",
            "children": [
                {
                    "id": 1,
                    "child": "Sam",
                    "checked": true
                },
                {
                    "id": 1,
                    "child": "Ted",
                    "checked": false
                }
            ]
        },
        {
            "id": 2,
            "parent": "Jessica",
            "children": [
                {
                    "id": 1,
                    "child": "Sam",
                    "checked": false
                }
            ]
        },
    ]
}

Current code snippet:

    grandparents.value = value.value.map((el) => ({
        ...el,
        parents: el.components.filter((parent) => parent.children?.some((child) => child.checked))
    }))

Current output:

{
    "id": 1,
    "grandparent": "Timmy",
    "parents": [
        {
            "id": 1,
            "parent": "Johnny",
            "children": [
                {
                    "id": 1,
                    "child": "Sam",
                    "checked": true
                },
                {
                    "id": 1,
                    "child": "Ted",
                    "checked": false
                }
            ]
        }
    ]
}

Successful filtering of the parents array, now aiming to also filter out unchecked children.

Desired results

{
    "id": 1,
    "grandparent": "Timmy",
    "parents": [
        {
            "id": 1,
            "parent": "Johnny",
            "children": [
                {
                    "id": 1,
                    "child": "Sam",
                    "checked": true
                }
            ]
        }
    ]

javascript arrays

Answer 1

Answer №1

filter() function will specifically add or remove the object without modifying the inner children array.

An alternative approach could be using the reduce() method where:

for each parent, filter out the children
if a child is found, update the object with the filtered children array
otherwise, exclude this particular parent

let data = {"id": 1, "grandparent": "Timmy", "parents": [{"id": 1, "parent": "Johnny", "children": [{"id": 1, "child": "Sam", "checked": true }, {"id": 1, "child": "Ted", "checked": false } ] }, {"id": 2, "parent": "Jessica", "children": [{"id": 1, "child": "Sam", "checked": false } ] } ] };

data.parents = data.parents.reduce((previous, current) => {
  const children = current.children.filter(child => child.checked);
  if (children.length) {
      return [ ...previous, { ...current, children } ];
  }
  return previous;
}, []);

console.log(data);

{
  "id": 1,
  "grandparent": "Timmy",
  "parents": [
    {
      "id": 1,
      "parent": "Johnny",
      "children": [
        {
          "id": 1,
          "child": "Sam",
          "checked": true
        }
      ]
    }
  ]
}

Answer 2

filter() function will specifically add or remove the object without modifying the inner children array.

An alternative approach could be using the reduce() method where:

for each parent, filter out the children
if a child is found, update the object with the filtered children array
otherwise, exclude this particular parent

let data = {"id": 1, "grandparent": "Timmy", "parents": [{"id": 1, "parent": "Johnny", "children": [{"id": 1, "child": "Sam", "checked": true }, {"id": 1, "child": "Ted", "checked": false } ] }, {"id": 2, "parent": "Jessica", "children": [{"id": 1, "child": "Sam", "checked": false } ] } ] };

data.parents = data.parents.reduce((previous, current) => {
  const children = current.children.filter(child => child.checked);
  if (children.length) {
      return [ ...previous, { ...current, children } ];
  }
  return previous;
}, []);

console.log(data);

{
  "id": 1,
  "grandparent": "Timmy",
  "parents": [
    {
      "id": 1,
      "parent": "Johnny",
      "children": [
        {
          "id": 1,
          "child": "Sam",
          "checked": true
        }
      ]
    }
  ]
}

Answer 3

Answer №2

Iterate through the ancestors list, and for each ancestor, we will only keep the descendants who are marked as checked. Then, we will use the filter() method again to eliminate any ancestors whose descendant list becomes empty after filtering.

const data = {
    "id": 1,
    "ancestor": "Timmy",
    "ancestors": [
        {
            "id": 1,
            "parent": "Johnny",
            "descendants": [
                {
                    "id": 1,
                    "descendant": "Sam",
                    "checked": true
                },
                {
                    "id": 1,
                    "descendant": "Ted",
                    "checked": false
                }
            ]
        },
        {
            "id": 2,
            "ancestor": "Jessica",
            "descendants": [
                {
                    "id": 1,
                    "descendant": "Sam",
                    "checked": false
                }
            ]
        },
    ]
}

const filteredData = {
  id: data.id,
  ancestor: data.ancestor,
  ancestors: data.ancestors.map((ancestor) => ({
    id: ancestor.id,
    parent: ancestor.parent,
    descendants: ancestor.descendants.filter((descendant) => descendant.checked)
  })).filter((ancestor) => ancestor.descendants.length > 0)
};

console.log(filteredData)

Answer 4

Iterate through the ancestors list, and for each ancestor, we will only keep the descendants who are marked as checked. Then, we will use the filter() method again to eliminate any ancestors whose descendant list becomes empty after filtering.

const data = {
    "id": 1,
    "ancestor": "Timmy",
    "ancestors": [
        {
            "id": 1,
            "parent": "Johnny",
            "descendants": [
                {
                    "id": 1,
                    "descendant": "Sam",
                    "checked": true
                },
                {
                    "id": 1,
                    "descendant": "Ted",
                    "checked": false
                }
            ]
        },
        {
            "id": 2,
            "ancestor": "Jessica",
            "descendants": [
                {
                    "id": 1,
                    "descendant": "Sam",
                    "checked": false
                }
            ]
        },
    ]
}

const filteredData = {
  id: data.id,
  ancestor: data.ancestor,
  ancestors: data.ancestors.map((ancestor) => ({
    id: ancestor.id,
    parent: ancestor.parent,
    descendants: ancestor.descendants.filter((descendant) => descendant.checked)
  })).filter((ancestor) => ancestor.descendants.length > 0)
};

console.log(filteredData)

Filtering an array of parent elements in Javascript based on a specific value found in

Answer №1

Answer №2

Similar questions

Send the user to an Angular route once they have successfully authenticated with Google

Load the content of the dialog and transfer variables

Navigating horizontally within a list using Sencha Touch2

Finding distinct elements in two NumPy arrays

What are some strategies for sorting information from a list that is constantly changing?

RecyclerView refuses to refresh under any circumstances

Guide on exporting type definitions and utilizing them with npm link for a local package

The combination of loading and scrolling JavaScript code is not functioning properly on the website

Executing a Python function on a server from a local machine with the help of AngularJS

What steps do I need to take in Bootstrap 5 to add a search icon to the navbar that reveals a search box beneath it when clicked?

Discovering the status of a wrapped component using Jest

Increasing numerical values within an array using JavaScript

Setting limits to disable or remove specific times from the time picker input box in Angular

Click on the link within the Checkbox label on MUI

Positioning Firefox absolutely within a table-cell element is possible

Creating dynamic routes for every page fetched from the API in Next.js

Enhance the Vue.js performance by preloading components

Breaking the loop with a simple statement

ng serve issue persists even after resolving vulnerabilities

Is there a way to keep the node text in place and prevent overlapping in my D3.js tree?