Adding Filtering in an array objects duplicated in existing method

Question

I have the following 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',
  }   
]

I am already filtering all the items who are not webp format and the image is null

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

As you can see there are 2 items (id 2 and id 5 ) with the same url, how can i also filter the item duplicated with the same url in the galleryFilter method ?

Does this answer your question? [How to remove all duplicates from an array of objects?](https://stackoverflow.com/questions/2218999/how-to-remove-all-duplicates-from-an-array-of-objects) — Jeremy Thille, Nov 23 '21 at 12:35
@Koala7 What do you mean? Your question is an exact duplicate. You want to filter by "image" instead of "name", but that's it. The linked question has 75 answers. How can this not help you? — Jeremy Thille, Nov 23 '21 at 12:42
Ok so why you are making me this question if you contest my answer — Koala7, Nov 23 '21 at 12:43
Why not? It's just another condition in the filter--what specific issue are you having? — Dave Newton, Nov 23 '21 at 12:44
I'm asking why the other question doesn't answer the additional filter requirement-what specifically isn't understood? You have one of your filter conditions working; it can be combined with the dupe question and answers to fulfill your requirements. Perhaps if you post your attempt it will become more clear what the issue is. — Dave Newton, Nov 23 '21 at 12:48

score 1 · Accepted Answer · answered Nov 23 '21 at 12:52

you can append another filter function to filter by image url, (I have added another object into your data set 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);

score 0 · Answer 2 · answered Nov 26 '21 at 04:39

Use filter and keep track of images with 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)

Adding Filtering in an array objects duplicated in existing method

2 Answers2