How to join .map and .filter to filter and remove duplicate in object array?

I currently have to use two variables for this:

Image example

See code Sandbox example

const arrayOne = [
    {
      id: 1,
      name: "João",
      city: {
        id: 1,
        name: "Rio de Janeiro"
      }
    },
    {
      id: 1,
      name: "Pedro",
      city: {
        id: 2,
        name: "Salvador"
      }
    },
    {
      id: 1,
      name: "Tiago",
      city: {
        id: 1,
        name: "Rio de Janeiro"
      }
    }
  ];

  const arrayTwo = arrayOne.map(function (item, index) {
    return item.city;
  });

  const arrayThree = arrayTwo.filter(
    (elem, index, arr) => index === arr.findIndex((t) => t.id === elem.id)
  );

CodePudding user response：

Just chain them together?

  const result = arrayOne.map(function (item, index) {
    return item.city;
  }).filter(
    (elem, index, arr) => index === arr.findIndex((t) => t.id === elem.id)
  );

If you mean that you want to map and filter at the same time, then you can use either flatMap or reduce as described in another Q/A: https://stackoverflow.com/a/34398349/211627

CodePudding user response：

If your filter is just to remove duplicates consider creating a Map which simply overwrites all duplicate city.ids. This can then be converted back to an array, here using spread syntax on the Map.values().

const arrayOne = [
  { id: 1, name: 'João', city: { id: 1, name: 'Rio de Janeiro' } },
  { id: 1, name: 'Pedro', city: { id: 2, name: 'Salvador' } },
  { id: 1, name: 'Tiago', city: { id: 1, name: 'Rio de Janeiro' } },
];

const arrayTwo = [...new Map(arrayOne.map(({ city }) => [city.id, city])).values()];

console.log(arrayTwo);

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>