Looping over two arrays of object to loop for matching ids. Then return a new array of custom object-CodePudding

Hello I am still working on my JS skills and I am having trouble wrapping my head around this issue. I have two arrays, one of phone contacts and another of messages. I am trying to loop over each one and return a custom array with a new object based off the contacts array.

const myNumber = '69';

const contacts = [
    { 
      phoneNumber: '420',
      name: "Mike Smith",
      favorite: false,
      color: "orange"     
    },
    { 
      phoneNumber: '360',
      name: "John Smith",
      favorite: true,
      color: "green"     
    },
];

const messages = [
  // ! from john to me 
    {
      to: '69',
      from: '360',
      isRead: false,
      time: new Date(),
      owner: 0,
      message: 'Hello there friend this is walker'
    },
    {
      to: '69',
      from: '360',
      isRead: true,
      time: new Date(),
      owner: 1,
      message: 'Hello there friend this is walker'
    },
    // ! from random number to me 
    {
      to: '69',
      from: '720',
      isRead: false,
      time: new Date(),
      owner: 0,
      message: 'Hello there friend from random person'
    },
    {
      to: '69',
      from: '720',
      isRead: true,
      time: new Date(),
      owner: 1,
      message: 'Hello there friend from random person'
    }
];

I would like to return a new messages array that looks like this...

const newMessages = [
  // ! from John to me 
    {
      to: '69',
      from: '360',
      isRead: false,
      time: new Date(),
      owner: 0,
      message: 'Hello there friend this is John',
      displayName: "John Smith"
    },
    {
      to: '69',
      from: '360',
      isRead: true,
      time: new Date(),
      owner: 1,
      message: 'Hello there friend this is John',
      displayName: "John Smith"
    },
    // ! from random number to me 
    {
      to: '69',
      from: '720',
      isRead: false,
      time: new Date(),
      owner: 0,
      message: 'Hello there friend from random person',
      displayName: '720',
    },
    {
      to: '69',
      from: '720',
      isRead: true,
      time: new Date(),
      owner: 1,
      message: 'Hello there friend from random person',
      displayName: '720',
    }
];

We add the display name property to the new messages objects. Display name will return contact name if either the "to" | "from" value == the contact "phoneNumber". If this is not the case the display name by default will return the message "from" value.

I really am not sure how to go about doing this. I tried looking at some other threads but I am having no luck. Please let me know if you have any advice. Also if this explanation was not helpful please let me know! Thank you!

CodePudding user response：

You can map over the array and use Array.find to get the item in contacts whose phoneNumber property is either the current item's to or from property. If an item is found, assign the item's name property to the current item's displayName property:

To implement a default display name, we can remove the if statement and use a ternary operator to assign the name property if an item was found, and otherwise assign the default display name.

const myNumber = '69';

const contacts=[{phoneNumber:"420",name:"Mike Smith",favorite:!1,color:"orange"},{phoneNumber:"360",name:"John Smith",favorite:!0,color:"green"}];

const messages=[{to:"69",from:"360",isRead:!1,time:new Date,owner:0,message:"Hello there friend this is walker"},{to:"69",from:"360",isRead:!0,time:new Date,owner:1,message:"Hello there friend this is walker"},{to:"69",from:"720",isRead:!1,time:new Date,owner:0,message:"Hello there friend from random person"},{to:"69",from:"720",isRead:!0,time:new Date,owner:1,message:"Hello there friend from random person"}];

let defaultDisplayName = 'Spectric'

const result = messages.map(e => {
  let found = contacts.find(f => [e.to, e.from].includes(f.phoneNumber))
  e.displayName = found ? found.name : defaultDisplayName;
  return e;
})

console.log(result)