Deep Filtering Array of Objects Javascript

Question

We're trying to wrap our heads around this for awhile and can't seem to get what we're looking for. We've attempted many loops and using lodash library to make this possible but no success. We want to loop through the arrays and return any objects and children that have the property checked:true or remove the objects that have checked: false. There are multiple levels deep and we're not able to return what we're looking for

types: [
  {
    name: 'Dresses',
    checked: true,
    collections: [
      {
        name: 'My Collection',
        checked: true,
        variations: [
          { 
            size: 'XXS',
            checked: true

          },
          { 
            size: 'XS',
            checked: false

          }
        ]
      },
      {
        name: 'False Collection',
        checked: false,
        variations: [
          { 
            size: 'XXS',
            checked: false

          },
          { 
            size: 'XS',
            checked: false

          }
        ]
      }
    ]
  },
  {
    name: 'Tops',
    checked: true,
    collections: [
      {
        name: 'Another Collection',
        checked: true,
        variations: [
          { 
            size: 'XXS',
            checked: false

          },
          { 
            size: 'XS',
            checked: true

          }
        ]
      }
    ]
  }
]

Our Expected output that we are trying to generate would be:

types: [
      {
        name: 'Dresses',
        checked: true,
        collections: [
          {
            name: 'My Collection',
            checked: true,
            variations: [
              { 
                size: 'XXS',
                checked: true

              }
            ]
          }
        ]
      },
      {
        name: 'Tops',
        checked: true,
        collections: [
          {
            name: 'Another Collection',
            checked: true,
            variations: [
              { 
                size: 'XS',
                checked: true

              }
            ]
          }
        ]
      }
    ]

Which removes any object with the property checked: false

IS this similar to your need: stackoverflow.com/questions/19483706/… — Mark Schultheiss
– Mark Schultheiss, Commented Jan 15, 2018 at 21:27
Are you saying that variations might also have nested collections? — charlietfl
– charlietfl, Commented Jan 15, 2018 at 21:29
What happens to a checked: true object nested in a checked: false one? — Scott Sauyet
– Scott Sauyet, Commented Jan 15, 2018 at 21:34
so can we assume checked: flase, is just a typo? Show what you have attempted WITH the result expected, we can help fix things :) — Mark Schultheiss
– Mark Schultheiss, Commented Jan 15, 2018 at 21:42

Yuri Gor · Accepted Answer · 2019-03-07 23:11:34Z

1

If you are using lodash, I suggest to use filterDeep method from deepdash:

var filtrate = _.filterDeep(types, function(value, key, parent) {
  if (parent.checked) return true;
});

Here is a test for your case

edited Mar 7, 2019 at 23:11

answered Jan 15, 2019 at 18:28

Yuri Gor

1,4931 gold badge15 silver badges28 bronze badges

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

Comments

Scott Sauyet · Accepted Answer · 2018-01-16 03:06:52Z

0

I usually choose to use Ramda for such problems. (Disclaimer: I'm one of its authors.) With Ramda, you could do it like this:

const types = [{"checked": true, "collections": [{"checked": true, "name": "My Collection", "variations": [{"checked": true, "size": "XXS"}]}], "name": "Dresses"}, {"checked": true, "collections": [{"checked": true, "name": "Another Collection", "variations": [{"checked": true, "size": "XS"}]}], "name": "Tops"}]

const {is, filter, pipe, toPairs, map, fromPairs} = R;
 
const onlyChecked = (obj) => 
  is(Array, obj) 
  ? filter(onlyChecked, obj)
  : is(Object, obj)
    ? pipe(
        toPairs,
        filter(([key, val]) => val.checked !== false),
        map(([key, val]) => [key, onlyChecked(val)]),
        fromPairs
      )(obj)
    : obj;

console.log(onlyChecked(types))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

This should be easy to port to lodash, as the key functions such as fromPairs and toPairs are included in both, and Ramda's is(Array)/is(Object) are very similar to lodash's isArray/isObject.

answered Jan 16, 2018 at 3:06

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

3 Comments

Troy Henne Over a year ago

Hey @scottsauyet thanks for posting. We will have to look into Rhamda since we have not used it before. The answer looks pretty succinct so we will have to dissect it and give it a shot. We'll upvote if the answer works for us.

Scott Sauyet Over a year ago

Looking back at that answer, it seems to me to make no sense. I will try to look at it again tonight.

Troy Henne Over a year ago

hey thanks for taking a look. After running your function with Ramda we were not able to return the results we wanted. It seems to be returning all the results not just the "checked": true objects

Collectives™ on Stack Overflow

Deep Filtering Array of Objects Javascript

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related