Filter array of objects while removing duplicates based on key pair

Question

I'm working on a little coding project for my own enjoyment, and I'm stumped by a problem of sorts. I have working code for now, but I know it could be cleaned up. Essentially, I'm trying to take an array of objects, and only return unique elements that meet certain criteria.

With this example data:

[{
    "title": "1. Title of first song",
    "file": {
      "url": "https://mediafiles.abc/files/media_E_001_r720P.mp4",
      "modifiedDatetime": "2019-02-06 03:40:52"
    },
    "filesize": 44043684,
    "trackImage": {
      "url": "https://mediafiles.abc/files/media_E_001.jpg",
      "modifiedDatetime": "2021-03-15T12:34:06+00:00"
    },
    "mimetype": "video/mp4",
    "subtitled": false,
    "frameWidth": 1280,
    "frameHeight": 720,
    "duration": 233.29973333333334
  },
  {
    "title": "1. Title of first song",
    "file": {
      "url": "https://mediafiles.abc/files/media_E_001_r240P.mp4",
      "modifiedDatetime": "2019-02-06 03:40:52"
    },
    "filesize": 653534,
    "trackImage": {
      "url": "https://mediafiles.abc/files/media_E_001.jpg",
      "modifiedDatetime": "2021-03-15T12:34:06+00:00"
    },
    "mimetype": "video/mp4",
    "subtitled": false,
    "frameWidth": 320,
    "frameHeight": 240,
    "duration": 233.29973333333334
  },
  {
    "title": "2. Title of second song",
    "file": {
      "url": "https://mediafiles.abc/files/media_E_002_r240P.mp4",
      "modifiedDatetime": "2019-02-06 03:40:52"
    },
    "filesize": 45456456,
    "trackImage": {
      "url": "https://mediafiles.abc/files/media_E_002.jpg",
      "modifiedDatetime": "2021-03-15T12:34:06+00:00"
    },
    "mimetype": "video/mp4",
    "subtitled": false,
    "frameWidth": 320,
    "frameHeight": 240,
    "duration": 233.29973333333334
  },
  {
    "title": "2. Title of second song",
    "file": {
      "url": "https://mediafiles.abc/files/media_E_002_r720P.mp4",
      "modifiedDatetime": "2019-02-06 03:40:52"
    },
    "filesize": 3453453,
    "trackImage": {
      "url": "https://mediafiles.abc/files/media_E_002.jpg",
      "modifiedDatetime": "2021-03-15T12:34:06+00:00"
    },
    "mimetype": "video/mp4",
    "subtitled": true,
    "frameWidth": 1280,
    "frameHeight": 720,
    "duration": 233.29973333333334
  },
  {
    "title": "3. Title of third song",
    "file": {
      "url": "https://mediafiles.abc/files/media_E_003_r240P.mp4",
      "modifiedDatetime": "2019-02-06 03:40:52"
    },
    "filesize": 45456456,
    "trackImage": {
      "url": "https://mediafiles.abc/files/media_E_003.jpg",
      "modifiedDatetime": "2021-03-15T12:34:06+00:00"
    },
    "mimetype": "video/mp4",
    "subtitled": false,
    "frameWidth": 320,
    "frameHeight": 240,
    "duration": 233.29973333333334
  },
  {
    "title": "3. Title of third song",
    "file": {
      "url": "https://mediafiles.abc/files/media_E_003_r720P.mp4",
      "modifiedDatetime": "2019-02-06 03:40:52"
    },
    "filesize": 3453453,
    "trackImage": {
      "url": "https://mediafiles.abc/files/media_E_003.jpg",
      "modifiedDatetime": "2021-03-15T12:34:06+00:00"
    },
    "mimetype": "video/mp4",
    "subtitled": true,
    "frameWidth": 1280,
    "frameHeight": 720,
    "duration": 233.29973333333334
  },
  {
    "title": "3. Title of third song",
    "file": {
      "url": "https://mediafiles.abc/files/media_E_003_r720P.mp4",
      "modifiedDatetime": "2019-02-06 03:40:52"
    },
    "filesize": 3453453,
    "trackImage": {
      "url": "https://mediafiles.abc/files/media_E_003.jpg",
      "modifiedDatetime": "2021-03-15T12:34:06+00:00"
    },
    "mimetype": "video/mp4",
    "subtitled": false,
    "frameWidth": 1280,
    "frameHeight": 720,
    "duration": 233.29973333333334
  },
  {
    "title": "3. Title of third song",
    "file": {
      "url": "https://mediafiles.abc/files/media_E_003_r1080P.mp4",
      "modifiedDatetime": "2019-02-06 03:40:52"
    },
    "filesize": 15611561561,
    "trackImage": {
      "url": "https://mediafiles.abc/files/media_E_003.jpg",
      "modifiedDatetime": "2021-03-15T12:34:06+00:00"
    },
    "mimetype": "video/mp4",
    "subtitled": false,
    "frameWidth": 1920,
    "frameHeight": 1080,
    "duration": 233.29973333333334
  }
]

I would like to filter this down and return a somewhat trimmed-down version of the 1st, 4th and 7th elements. My criteria is the following:

Discard elements with a frameHeight higher than a user-specified value (in this example, we'll assume that this value is 720)
Only return unique (based on title) elements in final set
Keep highest resolution items (based on frameHeight)
Prefer non subtitled media if possible (ie, if both subtitled and non-subtitled element exist at the highest allowed resolution, keep only non-subtitled element)

In addition, I'd like the return array's objects to include only 4 keys: "title", "url" (which would be mapped from file.url), "filesize", and "duration"

I've tried various things so far, including:

sorting the array based on each element's frameHeight in descending order, then
looping over the sorted array and pushing values into a new array if title doesn't exist in array, then
filtering out subtitled versions for each element, but only if a non-subtitled version is present at that item's resolution.

As you can tell, what I have so far is messy and very ... inelegant.

Here it is:

// data is my data, reverse sorted by frameHeight
function getMediaInfo(data) {
  let mediaFiles = [];
  for (var mediaFileItem of data) {
    if ((mediaFileItem.frameHeight !== 0 && mediaFileItem.frameHeight > prefs.maxRes) || mediaFiles.filter(mediaFile => {
        return mediaFile.title == mediaFileItem.title && mediaFile.subtitled == mediaFileItem.subtitled
      }).length > 0) {
      continue;
    } else {
      mediaFiles.push({
        title: mediaFileItem.title,
        filesize: mediaFileItem.filesize,
        url: mediaFileItem.file.url,
        subtitled: mediaFileItem.subtitled,
        duration: mediaFileItem.duration
      });
    }
  }
  if (mediaFiles.length > 1) mediaFiles = mediaFiles.filter(mediaFile => !mediaFile.subtitled);
  return mediaFiles.reverse();
}

I would like to use some sort of combination of filter, map and reduce, but quite frankly I'm not sure where to start.

I'm not sure if one reduce could manage all that, or if I would need to chain a few things together. In any case, I'm looking for something clean and elegant, not a bunch of for loops like I have at the moment.

I'll appreciate any insight into how to best approach this. Right now like I said... I'm stumped.

Thank you all!

I would just make a reduce that filters out or in based on your criteria. It's easy enough to run checks along the way to determine if a title exists and if it does to compare frameheight etc. I think you need to show your attempt first to find the refinement you're seeking — Kinglish
– Kinglish, Commented Jan 6, 2022 at 16:44
I've added what I have so far, but like I said.. It's ugly as heck. — SirCharlo
– SirCharlo, Commented Jan 6, 2022 at 16:52

trincot · Accepted Answer · 2022-01-06 17:02:55Z

Here is a function that performs the filtering, the grouping (using a Map), the retaining of the best scoring object per group, and the reduction to a few properties:

function convert(data, maxFrameHeight=720) {
    data = data.filter(({frameHeight}) => frameHeight <= maxFrameHeight);
    let map = new Map(data.map(item => [item.title, item]));
    for (let item of data) {
        let {frameHeight, subtitled} = map.get(item.title);
        if ((item.frameHeight - frameHeight || subtitled - item.subtitled) > 0) {
            map.set(item.title, item);
        }
    }
    return Array.from(map.values(), ({title, file: {url}, filesize, duration}) =>
        ({title, url, filesize, duration})
    );
}

let data = [{"title": "1. Title of first song","file": {"url": "https://mediafiles.abc/files/media_E_001_r720P.mp4","modifiedDatetime": "2019-02-06 03:40:52"},"filesize": 44043684,"trackImage": {"url": "https://mediafiles.abc/files/media_E_001.jpg","modifiedDatetime": "2021-03-15T12:34:06+00:00"},"mimetype": "video/mp4","subtitled": false,"frameWidth": 1280,"frameHeight": 720,"duration": 233.29973333333334},{"title": "1. Title of first song","file": {"url": "https://mediafiles.abc/files/media_E_001_r240P.mp4","modifiedDatetime": "2019-02-06 03:40:52"},"filesize": 653534,"trackImage": {"url": "https://mediafiles.abc/files/media_E_001.jpg","modifiedDatetime": "2021-03-15T12:34:06+00:00"},"mimetype": "video/mp4","subtitled": false,"frameWidth": 320,"frameHeight": 240,"duration": 233.29973333333334},{"title": "2. Title of second song","file": {"url": "https://mediafiles.abc/files/media_E_002_r240P.mp4","modifiedDatetime": "2019-02-06 03:40:52"},"filesize": 45456456,"trackImage": {"url": "https://mediafiles.abc/files/media_E_002.jpg","modifiedDatetime": "2021-03-15T12:34:06+00:00"},"mimetype": "video/mp4","subtitled": false,"frameWidth": 320,"frameHeight": 240,"duration": 233.29973333333334},{"title": "2. Title of second song","file": {"url": "https://mediafiles.abc/files/media_E_002_r720P.mp4","modifiedDatetime": "2019-02-06 03:40:52"},"filesize": 3453453,"trackImage": {"url": "https://mediafiles.abc/files/media_E_002.jpg","modifiedDatetime": "2021-03-15T12:34:06+00:00"},"mimetype": "video/mp4","subtitled": true,"frameWidth": 1280,"frameHeight": 720,"duration": 233.29973333333334},{"title": "3. Title of third song","file": {"url": "https://mediafiles.abc/files/media_E_003_r240P.mp4","modifiedDatetime": "2019-02-06 03:40:52"},"filesize": 45456456,"trackImage": {"url": "https://mediafiles.abc/files/media_E_003.jpg","modifiedDatetime": "2021-03-15T12:34:06+00:00"},"mimetype": "video/mp4","subtitled": false,"frameWidth": 320,"frameHeight": 240,"duration": 233.29973333333334},{"title": "3. Title of third song","file": {"url": "https://mediafiles.abc/files/media_E_003_r720P.mp4","modifiedDatetime": "2019-02-06 03:40:52"},"filesize": 3453453,"trackImage": {"url": "https://mediafiles.abc/files/media_E_003.jpg","modifiedDatetime": "2021-03-15T12:34:06+00:00"},"mimetype": "video/mp4","subtitled": true,"frameWidth": 1280,"frameHeight": 720,"duration": 233.29973333333334},{"title": "3. Title of third song","file": {"url": "https://mediafiles.abc/files/media_E_003_r720P.mp4","modifiedDatetime": "2019-02-06 03:40:52"},"filesize": 3453453,"trackImage": {"url": "https://mediafiles.abc/files/media_E_003.jpg","modifiedDatetime": "2021-03-15T12:34:06+00:00"},"mimetype": "video/mp4","subtitled": false,"frameWidth": 1280,"frameHeight": 720,"duration": 233.29973333333334},{"title": "3. Title of third song","file": {"url": "https://mediafiles.abc/files/media_E_003_r1080P.mp4","modifiedDatetime": "2019-02-06 03:40:52"},"filesize": 15611561561,"trackImage": {"url": "https://mediafiles.abc/files/media_E_003.jpg","modifiedDatetime": "2021-03-15T12:34:06+00:00"},"mimetype": "video/mp4","subtitled": false,"frameWidth": 1920,"frameHeight": 1080,"duration": 233.29973333333334}];
let result = convert(data);
console.log(result);

Holy moly that was fast! Thank you so much. I wasn't expecting actual code that works, just a general nudge in the right direction. Thank you for your answer; I'll be reading up on Maps now, as I haven't used them in the past

Collectives™ on Stack Overflow

Filter array of objects while removing duplicates based on key pair

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related