How to filter json data while Fetching in Vuejs

May 9, 2022

Hi I want to filter datas when fetching. For example: in to do list I want to filter only finished datas. Here is part of my fetch code:

Json db: http://localhost:3000/yapilacaklar.

<script>
 mounted(){
    fetch('http://localhost:3000/yapilacaklar')
      .then ((res)=>res.json())
      .then ((data)=>this.yapilacaklar=data)
       // I want to add filter parameters here
      .catch((err)=>console.log(err))
  }
 
</script>

>Solution :

You can use the computed for this:

computed: {
    // a computed getter
    yapilaFinished () {
      // `this` points to the component instance
      return this.yapilacaklar.filter((data)=> data.finished === true)
    }
}

or just when you get the data filter the data:

mounted(){
    fetch('http://localhost:3000/yapilacaklar')
      .then ((res)=>res.json())
      .then ((data)=>this.yapilacaklar=data.filter((d)=> d.finished === true))
       // I want to add filter parameters here
      .catch((err)=>console.log(err))
  }