Filter Array based on a property in the array of its objects

Question

Given is following data structure

const list = [
  {
    title: 'Section One',
    data: [
      {
        title: 'Ay',
      },
      {
        title: 'Bx',
      },
      {
        title: 'By',
      },
      {
        title: 'Cx',
      },
    ],
  },
  {
    title: 'Section Two',
    data: [
      {
        title: 'Ay',
      },
      {
        title: 'Bx',
      },
      {
        title: 'By',
      },
      {
        title: 'Cx',
      },
    ],
  },
];

What i want to do ist to filter this list based on title property in the data array of each object. An example would be to have the list where the title property of the childs starts with "B", so the list will look like that:

const filteredList = [
  {
    title: 'Section One',
    data: [
      {
        title: 'Bx',
      },
      {
        title: 'By',
      }
    ],
  },
  {
    title: 'Section Two',
    data: [
      {
        title: 'Bx',
      },
      {
        title: 'By',
      }
    ],
  },
];

What i tried so far was something like that:

 const items = list.filter(item =>
      item.data.find(x => x.title.startsWith('A')),
    );

or

const filtered = list.filter(childList => {
  childList.data.filter(item => {
    if (item.title.startsWith('B')) {
      return item;
    }
    return childList;
  });
});

But i think i am missing a major point here, maybe some of you could give me a tip or hint what i am doing wrong

Best regards

Nick Parsons · Accepted Answer · 2019-11-04 08:45:32Z

1

Your issue is that you're doing .filter() on list. This will either keep or remove your objects in list. However, in your case, you want to keep all objects in list and instead map them to a new object. To do this you can use .map(). This way you can map your objects in your list array to new objects which contain filtered data arrays. Here's an example of how you might do it:

const list=[{title:"Section One",data:[{title:"Ay"},{title:"Bx"},{title:"By"},{title:"Cx"}]},{title:"Section Two",data:[{title:"Ay"},{title:"Bx"},{title:"By"},{title:"Cx"}]}];

const filterByTitle = (search, arr) => 
  arr.map(
    ({data, ...rest}) => ({
        ...rest, 
        data: data.filter(({title}) => title.startsWith(search))
    })
  );
console.log(filterByTitle('B', list));

edited Nov 4, 2019 at 8:45

answered Nov 4, 2019 at 8:33

Nick Parsons

51.7k6 gold badges62 silver badges80 bronze badges

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

Collectives™ on Stack Overflow

Filter Array based on a property in the array of its objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related