vue filtersearch an array of object inside an array of object

Question

I have a JSON formatted data that I retrieve from an api call, its structure looks like this..

data = [ { name: 'John', 
           school:[ { school_name: 'Harvard', date_attended: '2017-05-23' },
                    { school_name: 'UCLA', date_attended: '2012-03-13' } ] 
         },
         { name: 'Harry', 
           school:[ { school_name: 'Stanford', date_attended: '2015-09-18' }] 
         },
         ....
       ]

now, in I have a computed property called filterSearch

computed: {
    filterSearch() {
        if(this.search == '') {
                return this.teachers_list;
            } else {
                return this.teachers_list.filter( hero => {
                return hero.name != null 
                    
                   ?
                    
                   !this.search || hero.name.toLowerCase().includes(this.search.toLowerCase()) 

                   : ''
                })
            }
    }
}

This works well when I search the name, but how do I make it work to do the same when I search the school name

Bulent · Accepted Answer · 2020-10-26 12:13:53Z

2

You need another filter in filter.

filterSearch() {
    if(this.search != '') {
        return this.teachers_list.filter( hero => {
            hero.name.toLowerCase().includes(this.search.toLowerCase()) ||
            hero.school.filter(x => x.name.toLowerCase().includes(this.search.toLowerCase()).length > 0
        })
    }
    return this.teachers_list;
}

answered Oct 26, 2020 at 12:13

Bulent

3,4411 gold badge19 silver badges25 bronze badges

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

Comments

ecoplaneteer · Accepted Answer · 2020-10-26 12:32:56Z

1

I made some improvement to filterSearch() and also implemented filterSearchBySchoolName()

filterSearchByName() {
  if (this.search === '' || !this.search) {
    return this.teachers_list
  } else {
    return this.teachers_list.filter(
      (hero) =>
        hero.name?.toLowerCase()
          .includes(this.search.toLowerCase())
    )
  }
},
filterSearchBySchoolName() {
  if (this.search === '' || !this.search) {
    return this.teachers_list
  } else {
    return this.teachers_list.filter((hero) =>
      hero.school?.some(
        (school) =>
          school.school_name
            .toLowerCase()
            .includes(this.search.toLowerCase())
      )
    )
  }
}

edited Oct 26, 2020 at 12:32

answered Oct 26, 2020 at 12:27

ecoplaneteer

1,9841 gold badge12 silver badges29 bronze badges

Collectives™ on Stack Overflow

vue filtersearch an array of object inside an array of object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related