delete duplicate elements javascript fix with vue js

1

I have the following data in json that is stored in my data vue js

proveedoresSeleccionados: [{id: 1, texto: "ORSIS S.A.C", check: false },
                          {id: 2, texto: "ABS S.A.C",check: false },
                          {id: 2, texto: "ABS S.A.C",check: false },
                          {id: 3, texto: "ERT S.A.C" , check: false},
                          {id: 4, texto: "APPLE S.A.C" , check: false}]

I'm trying with this but it does not return anything.

 const resultado = uniq(this.proveedoresSeleccionados.filter((proveedor)=> {
           proveedor.id
        }).map((proveedor)=>{
          return proveedor;
        }))

Any suggestions as I can do to obtain a new matrix but of non-repeated elements?

    
asked by HalleyRios 23.05.2018 в 03:43
source

3 answers

1

You have the classic solution of traversing the array of objects in a loop but I think it's smarter to use Reduce by filtering by the value you want ( id or texto )

<script>

var proveedoresSeleccionados = [{id: 1, texto: "ORSIS S.A.C", check: false },
                          {id: 2, texto: "ABS S.A.C",check: false },
                          {id: 2, texto: "ABS S.A.C",check: false },
                          {id: 3, texto: "ERT S.A.C" , check: false},
                          {id: 4, texto: "APPLE S.A.C" , check: false}]

console.log(
Object.values(proveedoresSeleccionados.reduce((prev,next)=>Object.assign(prev,{[next.texto]:next}),{})));


</script>

I edit with an explanation to the code :

First, Reduce executes the function indicated for each element of array . In this case, the function to execute would be:

function(prev,next){
return Object.assign(prev,{[next.text]:next}),{});
}

That with expressions of type arrow is summarized to:

(prev,next)=>Object.assign(prev,{[next.texto]:next}),{}));

Reduce can take 4 values:

  
  • Previous value
  •   
  • currentValue
  •   
  • currentIndex
  •   
  • array
  •   

The first time the function is called, valorAnterior and valorActual   They can have one of two values. If a valorInicial was provided to   call reduce , then valorAnterior will equal the valorInicial and    valorActual will be equal to the first element of array . If it was not provided   a valorInicial , then valorAnterior will be equal to the first value in   the array and valorActual will be the second.

In this case we will use two (the value of the previous iteration and the value of the current one ( prev and next ))

And we'll call Object.assign() . As indicated in the documentation:

  

The Object.assign () method is used to copy the values of all   the enumerable properties of one or more source objects to an object   destination. Returns the destination object

Also:

  

The properties in the destination object will be overwritten by the   properties in the sources if they have the same key . Properties   Later sources may overwrite the previous ones.

That is, we are going to copy in a new array of objects the elements that we are iterating through reduce taking advantage of the characteristic that has assign of overwriting objects if they are repeated.

So, in the first iteration, take the object:

 {id: 1, texto: "ORSIS S.A.C", check: false }

And put it in the new array of objects as long as there is no longer an object with the same property value texto ({[next.text]: next}). It is important to return the value as an object (in braces) so that in the next iteration you can access the property texto of the object. .

In the second iteration, it will do the same with the object:

{id: 2, texto: "ABS S.A.C",check: false }

And since there is no object still with the text "ABS S.A.C" it will get through without problems.

In the next iteration you will get the object:

{id: 2, texto: "ABS S.A.C",check: false }

And since there is already a texto equal will overwrite the one that already exists in the array .

With this we get a new array with unique identifiers (I've filtered by texto but you could do it by id )

I hope you explained to me:)

    
answered by 23.05.2018 / 11:50
source
1

You can try using either of the two solutions:

The Set object allows you to store unique values of any type

var proveedoresSeleccionados = [
  {id: 1, texto: "ORSIS S.A.C", check: false },
  {id: 2, texto: "ABS S.A.C",check: false },
  {id: 2, texto: "ABS S.A.C",check: false },
  {id: 3, texto: "ERT S.A.C" , check: false},
  {id: 4, texto: "APPLE S.A.C" , check: false}
]
var unique = [...new Set(proveedoresSeleccionados.map(item => item.texto))]             

console.log(unique)

Using Array.filter to determine what values to delete after mapping it

var proveedoresSeleccionados = [
  {id: 1, texto: "ORSIS S.A.C", check: false },
  {id: 2, texto: "ABS S.A.C",check: false },
  {id: 2, texto: "ABS S.A.C",check: false },
  {id: 3, texto: "ERT S.A.C" , check: false},
  {id: 4, texto: "APPLE S.A.C" , check: false}
]
var unique = proveedoresSeleccionados.map(item => item.texto)
  .filter((value, index, self) => self.indexOf(value) === index)
  
console.log(unique)
    
answered by 23.05.2018 в 12:19
0

I created a function also to filter if someone wants to use it too.

function remove_duplicates(arreglo) {
    var no_duplicate = arreglo.filter((objeto, index, self) =>
     index === self.findIndex((t) => (t.id === objeto.id 
    )));
    return no_duplicate 
  }
    
answered by 25.05.2018 в 18:23