Checking condition in deep nested array of objects and return the parent array

Question

I have a JavaScript problem in a React Native (Expo) project.

Description:

I am using the Contacts API to get all contacts from the phone. I want to filter the list and only render the contacts which numbers are also included in the application database (registered phones).

Problem:

I want to iterate through the array of objects and find in a nested object (phoneNumbers) the number to compare with the users number. If the condition is correct then i want to use the parent array for the contact details.

This is the data structure of one object in the parent array:

     contacts =  [
          Object {
            "contactType": "person",
            "firstName": "Mario",
            "id": "FF1AAC7C-679A-4C21-7AD9-05CBFCD9812A",
            "imageAvailable": false,
            "lastName": "Mario",
            "name": "Muster",
            "phoneNumbers": Array [
            Object {
               "countryCode": "de",
               "digits": "01722618199",
               "id": "D5CEEE9B-1AF6-49A1-A45F-501370D5B7A7",
               "label": "mobile",
               "number": "0172 2618199",
               },
             ],
          }, 
          Object {
             "contactType": "person",
             "firstName": "Tina",
             "id": "FF1AAC7C-579A-4C21-7AD9-05CBFCD9812A",
             "imageAvailable": false,
             "lastName": "Mario",
             "name": "Muster",
             "phoneNumbers": Array [
             Object {
                "countryCode": "de",
                "digits": "01722518199",
                "id": "D5CEEE9B-1AF5-49A1-A45F-501370D5B7A7",
                "label": "mobile",
                "number": "0172 2518199",
                },
             ],
          }, 
        ]

My function:

    const findContacts = (userNumber) => {
    let counter = 0;
    contacts
      .filter((item) => {
        return item;
      })
      .map((item) => {
        let newElt = Object.assign({}, item);
        return newElt.phoneNumbers.map((item, i) => {
          if (item.digits.toString() === userNumber) {
            counter = i;
          }
        });
      });
    return contacts[counter];
  };

Getting the following error:

undefined is not an object newElt.phoneNumber.map

Answer 1

Is the error actually "newElt.phoneNumber.map" with no "s" in numbers? If so, something is suspect because you haven't misspelled it in your function paste.

Also your "filter" probably isn't doing what you want. Filter should be returning true/false and only including items that have "true" returned.

Likely what you really wanted to do was JUST use .filter and then return "True" for each item whose phoneNumbers contains what you want...

i.e. something like this would give you all the parent array contact objects that matched the phone number in question (had at least one mention in its child array members)

let contactsThatHadPhoneNumber = contacts.filter(eachContact => {
  return eachContact.phoneNumbers.filter(
    eachContactNumber => eachContactNumber.number == numberYouAreLookingFor).length > 0
  )});