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

Question

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

Edin Omeragic · Accepted Answer · 2019-06-22 09:12:58Z

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)
        }
    }
}

gwtjs · Accepted Answer · 2019-06-22 03:28:07Z

0

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
    }
},

answered Jun 22, 2019 at 3:28

gwtjs

1211 gold badge1 silver badge4 bronze badges

Comments

TommyF · Accepted Answer · 2019-06-22 06:41:35Z

0

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)
  }
}

answered Jun 22, 2019 at 6:41

TommyF

7,1708 gold badges39 silver badges63 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related