vuejs filter is not a function error

Question

I've got a very basic array:

specialityTest: [{person:'nurse', text:'text1'}, 
{person:'nurse', text:'text1'}, 
{person:'physician', text:'text1'}, 
{person:'physician', text:'text1'}]

I'm trying to filter this using basic filter function:

      this.specialityTest.filter((person) => {
        return (person =="physician")
      })

and then copy filtered array:

  methods: {
   seedSpeciality(){
      this.nurseListSpeciality2 = JSON.parse(JSON.stringify(this.specialityTest.filter(
      (person) => {
        return (person =="physician")
      })))
  },
 }

and this is not working for me... I've got error:

Uncaught (in promise) TypeError: this.specialityTest.filter is not a function at VueComponent.seedSpeciality (AddOfferDialog.vue?f4fc:1771) at VueComponent.boundFn [as seedSpeciality].

What am I doing wrong here?

edit: I run this function from api call:

  fetchSpecialityArray(){
    this.$http.get('http://127.0.0.1:8000/api/speciality')
      .then(response => response.json())
      .then(result => this.specialityTest = result).then(this.seedSpeciality.bind(this))
  },

Do a console.log(this.specialityTest) to see if it's what you expect (may be undefined). Also, your filter condition should be person.person === "physician" — blex
– blex, Commented Apr 12, 2018 at 18:13
console.log(this.specialityTest) gives the correct array of 90 elements. changing filter conditions to person.person is not changing the error — gileneusz
– gileneusz, Commented Apr 12, 2018 at 18:16
Your error seems to indicate that you're calling the method in a Promise. Is this the case? If so, this may not be correctly binding and you may need to explicitly bind the value. Alternatively, you can store this inside a variable accessible via closure and then use that variable instead. — B. Fleming
– B. Fleming, Commented Apr 12, 2018 at 18:22
@blex correct. console.log in seedSpeciality shows correct array — gileneusz
– gileneusz, Commented Apr 12, 2018 at 18:32

Roland · Accepted Answer · 2018-04-12 19:06:09Z

6

For me it works fine.Take a look:

<div id="app">
  <button @click="filter">Filter</button>
</div>

new Vue({
  el: "#app",
  data: {
    specialityTest: [
      {person:'nurse', text:'text1'}, 
      {person:'nurse', text:'text1'}, 
      {person:'physician', text:'text1'}, 
      {person:'physician', text:'text1'}
    ]
  },
  methods: {
    filter() {
        let filtered = this.specialityTest.filter((el) => {
        return (el.person =="physician")
      })
      console.log(filtered)
    }
  }
})

You are looping through array of object with filter function so in each loop you get the object.So if you use el.person == "physician" it will work fine

Take a look to my jsfiddle

edited Apr 12, 2018 at 19:06

answered Apr 12, 2018 at 18:19

Roland

28.1k9 gold badges108 silver badges103 bronze badges

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

10 Comments

Roland Over a year ago

When you use the function filter,you are looping through array of objects.so in each loop you are getting the object.So you cannot use person == "physician",but if you want person.person == "physician".Try my code it works fine

gileneusz Over a year ago

this is not solving the error - see updated question. Maybe because I call this function in a Promise could be the case

Roland Over a year ago

to understand the question.You want to filter the specialityTest property when you get response from backend?I am not clear where is the problem but obviously my response is right when you use filter function

gileneusz Over a year ago

no doubt that your code is correct, I've changed my code, but gets the same error. I don't know the case :/

Roland Over a year ago

Please give a clear description of your problem.What i am understanding is that you get from api data that will fill the specialityTest property.Then you want to filter this property.Am i right?

|

jovialcore · Accepted Answer · 2023-12-06 13:09:51Z

0

If you are using vuejs 3 setup api and what you are trying to filter is from an external api call, consider appendding data after .value.

e.g specialityTest.value.data.filter(...)

answered Dec 6, 2023 at 13:09

jovialcore

6661 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

vuejs filter is not a function error

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related