title: Append property from two arrays of objects
body: <p>In JavaScript, I have two arrays - <code>arr1</code>, <code>arr2</code></p>
  <p><code>arr1</code> is an array of objects as shown below -</p>
  <pre><code>[
     { user: {id: 1, name: &quot;name1&quot;, role: &quot;A&quot;} },
     { user: {id: 2, name: &quot;name2&quot;, role: &quot;B&quot;} },
     { user: {id: 3, name: &quot;name3&quot;, role: &quot;A&quot;} }
  ]
  </code></pre>
  <p><code>arr2</code> is also an array of objects :</p>
  <pre><code>[
     { id: 2, username: &quot;brad&quot;, ... },
     { id: 1, username: &quot;colly&quot;, ... },
     { id: 3, username: &quot;sophie&quot;, ... }
  ]
  </code></pre>
  <p>Now, what I want to get an output <code>arr1</code> like this -</p>
  <pre><code>[
     { user: {id: 1, name: &quot;name1&quot;, role: &quot;A&quot;, username: &quot;colly&quot;} },
     { user: {id: 2, name: &quot;name2&quot;, role: &quot;B&quot;, username: &quot;brad&quot;} },
     { user: {id: 3, name: &quot;name3&quot;, role: &quot;A&quot;, username: &quot;sophie&quot;} }
  ]
  </code></pre>
  <p>Basically, if <code>arr1[0].user.id = arr2[1].id</code> then add the <code>username</code> property from <code>arr2</code> to that <code>user</code> with the <code>id</code>. Same across the entire array, and then finally return the original array <code>arr1</code> with <code>username</code> appended to each respective <code>user</code> object.</p>
  <p>Hope you understand what I tried to explain. Thanks in advance.</p>