Filter the object based on the nested array object

Question

Recently, I gave an interview and rejected there were about 10 questions. Each question had 60 seconds. There was a question that went wrong but I was curious why it happened.

I have to filter those objects in which given SearchValue match with the list array object name property. The search value was already given.

For example:

const SearchValue = 'event';

It is filtered array because list[0].name property value match with the the event text.

const res = [
    {
        id: 2,
        name: 'Events',
        list: [
            {
                id: 1,
                name: 'Event Ticketing System',
                slug: '/'
            },
            {
                id: 2,
                name: 'Events Management Software',
                slug: '/'
            }
        ]
    }
];

The name property contains value something like this Online Translation Services and Spelling and Grammar Check etc. If the search value match with the text then save it those filtered objects and console.log. The data-set was something like this.

const listing = [
  {
    id: 1,
    name: 'Language',
    list: [
      {
        id: 1,
        name: 'Online Translation Services',
        slug: '/'
      },
      {
        id: 2,
        name: 'Spelling and Grammar Check',
        slug: '/'
      },
      {
        id: 3,
        name: 'TEFL Courses',
        slug: '/'
      },
      {
        id: 4,
        name: 'Language Learning',
        slug: '/'
      }
    ]
  },
  {
    id: 2,
    name: 'Events',
    list: [
      {
        id: 1,
        name: 'Event Ticketing System',
        slug: '/'
      },
      {
        id: 2,
        name: 'Events Management Software',
        slug: '/'
      }
    ]
  }
];

My implementation was this.

const SearchValue = 'event';

const listing = [{
    id: 1,
    name: 'Language',
    list: [{
        id: 1,
        name: 'Online Translation Services',
        slug: '/'
      },
      {
        id: 2,
        name: 'Spelling and Grammar Check',
        slug: '/'
      },
      {
        id: 3,
        name: 'TEFL Courses',
        slug: '/'
      },
      {
        id: 4,
        name: 'Language Learning',
        slug: '/'
      }
    ]
  },
  {
    id: 2,
    name: 'Events',
    list: [{
        id: 1,
        name: 'Event Ticketing System',
        slug: '/'
      },
      {
        id: 2,
        name: 'Events Management Software',
        slug: '/'
      }
    ]
  }
];

const res = listing.filter(object => {
  if (Array.isArray(object.list) && object.list.length > 0) {
    return object.list.filter((item) => {
      return item.name.toLowerCase().indexOf(SearchValue.toLowerCase()) !== -1;
    });
  }
});


console.log('Result Array', res);

If anyone can provide a good solution really appreciated. I also want to know What was wrong with this logic?

I think this might answer your question medium.com/better-programming/… — Saroj Shrestha
– Saroj Shrestha, Commented Aug 8, 2020 at 13:50
Nothing matches with event... so you should have an empty array?? — Mickael B.
– Mickael B., Commented Aug 8, 2020 at 14:07

Unmitigated · Accepted Answer · 2020-08-08 14:43:57Z

2

You can use Array#filter along with Array#some to verify if any of the elements of the list property of each object contains the search text in its name.

const listing = [ { id: 1, name: 'Language', list: [ { id: 1, name: 'Online Translation Services', slug: '/' }, { id: 2, name: 'Spelling and Grammar Check', slug: '/' }, { id: 3, name: 'TEFL Courses', slug: '/' }, { id: 4, name: 'Language Learning', slug: '/' } ] }, { id: 2, name: 'Events', list: [ { id: 1, name: 'Event Ticketing System', slug: '/' }, { id: 2, name: 'Events Management Software', slug: '/' } ] } ];
const SearchValue = 'event';
const res = listing.filter(({list})=>
 list.some(({name})=>name.toLowerCase().includes(SearchValue.toLowerCase())));
console.log(res);

edited Aug 8, 2020 at 14:43

answered Aug 8, 2020 at 14:41

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

2 Comments

John Chucks Over a year ago

Wow ES6 has introduce array methods that I have to know. Clean solution

Winky Over a year ago

so just one of list items has SearchValue, select all first and second lever data?

tarkh · Accepted Answer · 2020-08-08 14:45:56Z

0

Check with RegEx and test

const SearchValue = 'event';

const listing = [{
    id: 1,
    name: 'Language',
    list: [{
        id: 1,
        name: 'Online Translation Services',
        slug: '/'
      },
      {
        id: 2,
        name: 'Spelling and Grammar Check',
        slug: '/'
      },
      {
        id: 3,
        name: 'TEFL Courses',
        slug: '/'
      },
      {
        id: 4,
        name: 'Language Learning',
        slug: '/'
      }
    ]
  },
  {
    id: 2,
    name: 'Events',
    list: [{
        id: 1,
        name: 'Event Ticketing System',
        slug: '/'
      },
      {
        id: 2,
        name: 'Events Management Software',
        slug: '/'
      }
    ]
  }
];

const res = listing.filter(object => {
  if (Array.isArray(object.list) && object.list.length > 0) {
    // Check items with RegEx test
    // and update object.list
    object.list = object.list.filter(item => new RegExp(SearchValue, 'i').test(item.name));
    // Return true if list length > 0
    if(object.list.length > 0) return true;
  }
});


console.log('Result Array', res);

edited Aug 8, 2020 at 14:45

answered Aug 8, 2020 at 14:07

tarkh

2,5691 gold badge11 silver badges14 bronze badges

1 Comment

tarkh Over a year ago

I've updated my answer, check comments in code below

Winky · Accepted Answer · 2020-08-09 00:56:51Z

0

Array Filter

let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

callback

Function is a predicate, to test each element of the array. Return true to keep the element, false otherwise.

Return value

A new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.

const SearchValue = 'language';

const listing = [{
    id: 1,
    name: 'Language',
    list: [{
        id: 1,
        name: 'Online Translation Services',
        slug: '/'
      },
      {
        id: 2,
        name: 'Spelling and Grammar Check',
        slug: '/'
      },
      {
        id: 3,
        name: 'TEFL Courses',
        slug: '/'
      },
      {
        id: 4,
        name: 'Language Learning',
        slug: '/'
      }
    ]
  },
  {
    id: 2,
    name: 'Events',
    list: [{
        id: 1,
        name: 'Event Ticketing System',
        slug: '/'
      },
      {
        id: 2,
        name: 'Events Management Software',
        slug: '/'
      }
    ]
  }
];

const res = listing.reduce((pre, object) => {
  if(!Array.isArray(object.list) || object.list.length <= 0)
    return pre
  
  object.list = object.list.filter((item) =>  item.name.toLowerCase().indexOf(SearchValue.toLowerCase()) > -1);
    
  return object.list.length > 0 ? [...pre, object] : pre;

}, []);


console.log('Result Array', res);

edited Aug 9, 2020 at 0:56

answered Aug 8, 2020 at 14:10

Winky

5062 silver badges7 bronze badges

1 Comment

John Chucks Over a year ago

I updated my question Why your results are returning { "id": 1,"name": "Language", "list": []} in the filtered result.

Collectives™ on Stack Overflow

Filter the object based on the nested array object

3 Answers 3

2 Comments

1 Comment

callback

Return value

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

callback

Return value

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related