How to filter array in json object with computed

Question

fetchData() {
      axios.get("api_url").then((response) => {
        this.dataArr = response.data;
      });
    },

I can't do this.dataArr = response.data.items.fruits; because I need to use this somewhere else like this.

dataArr looks like this:

{
   "items":{
      "fruits":[
         {
            "name":"banana",
            "type":"fruit",
    
         },
         {
            "name":"kiwi",
            "type":"fruit",
    
         },
  ]
}

I am trying to filter this in computed property:

filterData(){
   return this.dataArr.filter((item) => item.name )
}

But I am getting an error saying that this.dataArr is not a function, I need to get access to this.dataArr.items.fruits, but when I write it like that it's not working. Is there way to solve this?

Are you sure you're getting "this.dataArr is not a function"? Is doesn't make sense that using .filter() on this.dataArr would throw that error- filter() is an array prototype function. — zcoop98
– zcoop98, Commented Dec 16, 2020 at 19:01

Boussadjra Brahim · Accepted Answer · 2020-12-16 18:58:30Z

1

You should get access to the nested fruits array and it seems that you're trying to map that array by returning only the names in this case use map method:

 filterData(){
     if(this.dataArr.items && this.dataArr.items.fruits){
      return this.dataArr.items.fruits.map((item) => item.name )
      }else{
        return []
     }
    }

edited Dec 16, 2020 at 18:58

answered Dec 16, 2020 at 18:52

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

2 Comments

Dave Over a year ago

Doesn't work like that. Even when I try to compute return this.dataArr.items and then do a v-for in html with this computed it wont display anything

Dave Over a year ago

Yes but I think the issue is because I used nuxt.js

Collectives™ on Stack Overflow

How to filter array in json object with computed

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related