Remove an object with the same value of an array inside an array javascript

I have array like this:

[
    {givenName: "Name 1", phoneNumbers: [
        {label: "mobile", id: "5", number: "097 726 94 36"},
        {label: "other", id: "558", number: "0977269436"},
        {label: "other", id: "559", number: "0977269436"}
    ]},
    {givenName: "Name 2", phoneNumbers: [
        {label: "mobile", id: "5", number: "0968234838"},
        {label: "other", id: "558", number: "0966766555"},
        {label: "other", id: "559", number: "0966766555"}
    ]},
    {givenName: "Name 3", phoneNumbers: [
        {label: "other", id: "558", number: "0965777238"},
        {label: "other", id: "559", number: "0965777238"}
    ]},
]

Then I filter the number to get a number that is less than or equal to 10 digits. Then returns an array with items that do not match a number.

I then iterate through each of the above items, then push it into an empty array to get each individual item.

And my final result array like so:

[
    {givenName: "Name 1", phoneNumbers: "0977269436"},
    {givenName: "Name 2", phoneNumbers: "0968234838"},
    {givenName: "Name 2", phoneNumbers: "0966766555"},
    {givenName: "Name 3", phoneNumbers: "0965777238"}
]

Bellow is my code, it works normally.

I just wanted to ask if there’s a better way than my code.:

const contacts = [
  {givenName: "Name 1", phoneNumbers: [
    {label: "mobile", id: "5", number: "097 726 94 36"},
    {label: "other", id: "558", number: "0977269436"},
    {label: "other", id: "559", number: "0977269436"}
  ]},
  {givenName: "Name 2", phoneNumbers: [
    {label: "mobile", id: "5", number: "0968234838"},
    {label: "other", id: "558", number: "0966766555"},
    {label: "other", id: "559", number: "0966766555"}
  ]},
  {givenName: "Name 3", phoneNumbers: [
    {label: "other", id: "558", number: "0965777238"},
    {label: "other", id: "559", number: "0965777238"}
  ]},
]

const listContactsLocal = [];
const contactFilter = contacts.map((item) => {
  const listPhone = item?.phoneNumbers.filter((phone, index) => {
    return (
      index === item?.phoneNumbers.findIndex((obj) => {
        if (phone.number.length > 11) {
          return;
        }
        return obj.number === phone.number;
      })
    );
  });

  return {
    givenName: item?.givenName,
    phoneNumbers: listPhone,
  };
});

contactFilter.map((item) => {
  return item?.phoneNumbers.map((phone) => {
    return listContactsLocal.push({
      givenName: item?.givenName,
      phoneNumbers: phone?.number,
    });
  });
});


console.log(listContactsLocal)

.as-console-wrapper{min-height:100%;}

Sorry about my English.

Thank you. :))

Answer

You can simplify this down to a reduce() call inside a flatMap to flatten the resulting nested arrays.

const contacts = [{ givenName: "Name 1", phoneNumbers: [{ label: "mobile", id: "5", number: "097 726 94 36" }, { label: "other", id: "558", number: "0977269436" }, { label: "other", id: "559", number: "0977269436" }] }, { givenName: "Name 2", phoneNumbers: [{ label: "mobile", id: "5", number: "0968234838" }, { label: "other", id: "558", number: "0966766555" }, { label: "other", id: "559", number: "0966766555" }] }, { givenName: "Name 3", phoneNumbers: [{ label: "other", id: "558", number: "0965777238" }, { label: "other", id: "559", number: "0965777238" }] },];

const
  isFirstInstance = (number, index, arr) => arr.findIndex(o => o.number === number) === index,
  result = contacts.flatMap(({ givenName, phoneNumbers }) => (
    phoneNumbers.reduce((acc, { number }, i) => {
      if (number.length < 11 && isFirstInstance(number, i, phoneNumbers)) {
        acc.push({ givenName, phoneNumbers: number })
      }
      return acc;
    }, [])
  ));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }