La adición de Filtrado en una matriz de objetos duplicados en el método existente

0

Pregunta

Tengo el siguiente array

 [{ id: 1,
    type: 'video',
    image: null,
    url: 'https://www.youtube.com/1'
  },
  { id: 2,
    type: 'video',
    image: null,
    url: 'https://www.youtube.com/2' 
  },
  { id: 3,
    type: 'image',
    image: 'https://example-1.url.webp'
  },
  { id: 4,
    type: 'image',
    image: 'https://example-2.url.jpg',
  },
  { id: 5,
    type: 'video',
    image: 'https://www.youtube.com/2',
  }   
]

Ya estoy de filtrado de todos los elementos que no son webp formato y la imagen es null

  const galleryFilter = gallery.filter(
    (item) => item?.image?.indexOf("webp") === -1 || item?.image === null
  );

Como usted puede ver, hay 2 items (id 2 id y 5 ) con la misma dirección de internet, ¿cómo puedo filtrar el elemento duplicado con la misma dirección url en la galleryFilter método ?

arrays ecmascript-6 filter javascript
2021-11-23 12:31:20
2

Mejor respuesta

1

usted puede agregar otra función de filtro para filtrar por url de la imagen, (he añadido otro objeto en el conjunto de datos id: 6)

var gallery =  [{ id: 1,
    type: 'video',
    image: null,
    url: 'https://www.youtube.com/1'
  },
  { id: 2,
    type: 'video',
    image: null,
    url: 'https://www.youtube.com/2' 
  },
  { id: 3,
    type: 'image',
    image: 'https://example-1.url.webp'
  },
  { id: 4,
    type: 'image',
    image: 'https://example-2.url.jpg',
  },
  { id: 5,
    type: 'video',
    image: 'https://www.youtube.com/2',
  },
  { id: 6,
    type: 'video',
    image: 'https://www.youtube.com/2',
  }
];

var galleryFilter = gallery.filter( (item) => item?.image?.indexOf("webp") === -1 || item?.image !== null ).filter((item, i, arr) => i == arr.findIndex(e => e.image == item.image));

console.log(galleryFilter);

2021-11-23 12:52:03
0

Uso filter y seguir la pista de imágenes con Set

const gallery = [
  { id: 1, type: "video", image: null, url: "https://www.youtube.com/1" },
  { id: 2, type: "video", image: null, url: "https://www.youtube.com/2" },
  { id: 3, type: "image", image: "https://example-1.url.webp" },
  { id: 4, type: "image", image: "https://example-2.url.jpg" },
  { id: 5, type: "video", image: "https://www.youtube.com/2" },
];

const set = new Set();

const galleryFilter = gallery.filter((item) => {
  if (
    (item?.image?.includes("webp") || item?.image === null) &&
    !set.has(item?.image)
  ) {
    set.add(item.image);
    return true;
  }
});

console.log(galleryFilter)

2021-11-26 04:39:31

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................