CODEWITHSUNDEEP
vuejs2
JG_GJ
JG_GJ

Reputation: 785

How to filter an object of objects by means of a computed, vuejs?

I find myself filling a list using v-fordicha list is filled by an object object.

{
 id1:{
  descripcion: "Lorem ipsum dolor sit amet, consectetur adipisci"
  imagen: "https://source.unsplash.com/random"
  nivel: 1
  nombre: "Carpinteria"
  recomendada: true
 },
 idcat1: {
  descripcion: "Lorem ipsum dolor sit amet, consectetu"
  imagen: "https://source.unsplash.com/random"
  nivel: 1
  nombre: "Arquitectura"
  recomendada: false
 }
}

The detail is that said list must be filtered through the 'recommended' property. That is to say, I must create another object of objects but only of the recommended property = true.

Do it directly on the component with v-if. But I get a message that preferably uses a computed and that said computed return object objects already filtered and travel that object.

Try the following but it did not work:

computed:{
        categoriasFiltradas(){
            let vm = this;
            let newObj = {};
            for(let key in vm.listado_categorias){
                let obj = vm.listado_categorias[key];
                if(obj.recomendada == false){ 
                    //here you save the filtered object
                   return newObj[key] = obj;
                }
            }
        }
    },

How would that function be, thank you very much

Upvotes: 0

Views: 7494

Answers (3)

Edin Omeragic
Edin Omeragic

Reputation: 1968

First, you need to convert object to an array and for that you can use Object.entries, but it's only available in newer browsers, for older you may need to add following polyfill:

if (!Object.entries) {
    Object.entries = function (obj) {
        var ownProps = Object.keys(obj),
            i = ownProps.length,
            resArray = new Array(i); // preallocate the Array
        while (i--)
            resArray[i] = [ownProps[i], obj[ownProps[i]]];

        return resArray;
    };
}

Then create computed property and use map and filter functions:

new Vue({
    data: function () {
        return {
            categories: {
                id1: {
                    descripcion: "Lorem ipsum dolor sit amet, consectetur adipisci",
                    imagen: "https://source.unsplash.com/random",
                    nivel: 1,
                    nombre: "Carpinteria",
                    recomendada: true
                },
                id2: {
                    descripcion: "Lorem ipsum dolor sit amet, consectetu",
                    imagen: "https://source.unsplash.com/random",
                    nivel: 1,
                    nombre: "Arquitectura",
                    recomendada: false
                }
            }
        }
    },

    computed: {
        filtered() {
            return Object.entries(this.categories)
                .map(item => item[1])
                .filter(item => item.recomendada == true)
        }
    }
}

Upvotes: 1

TommyF
TommyF

Reputation: 7150

It seems and array of objects would be the better choice for your datastructure here.

ES6 has an Array.filter() method that does precisely what you're looking for and by using Object.keys you can even use it with your "object of objects" structure:

computed: {
  filtered() {
    return Object.keys(this.categories)
             .filter(key => this.categories[key].recommended === true)
  }
}

Upvotes: 0

gwtjs
gwtjs

Reputation: 121

just like this:

computed:{
    categoriasFiltradas(){
        let vm = this;
        let newObj = {};
        for(let key in vm.listado_categorias){
            let obj = vm.listado_categorias[key];
            if(obj.recomendada === true){ 
               newObj[key] = obj
            }
        }
        return newObj
    }
},

Upvotes: 0

Related Questions