title: Loop over two arrays of objects, connect and merge them on Id
body: <p>I am fairly new to javascript and have been looking for an example that matches what i'm trying to do, but am having trouble finding a solution. I have two arrays of objects structured like so:</p>
  
  <p>*Note: There will never be duplicate subId's within the subscriptionArray.</p>
  
  <pre><code>subscriptionArray = [
    {
      "subId" : 100,
      "companyId" : 5,
      "companyName" : "CompanyA",
      "domain" : "companyA.com"
    },
    {
      "subId" : 200,
      "companyId" : 6,
      "companyName" : "CompanyB",
      "domain" : "companyB.com"
    },
    {
      "subId" : 300,
      "companyId" : 5,
      "companyName" : "CompanyA",
      "domain" : "companyA.com"
    },
  
  ]
  
  userArray = [
    {
      "name" : "John",
      "companyId" : 5,
      "email" : "john@companyA.com"      
    },
    {
      "Name" : "Frank",
      "CompanyId" : 5,
      "Email" : "Frank@companyA.com"     
    },
    {
      "name" : "Bill",
      "companyId" : 6,
      "email" : "bill@companyB.com"
  
    }
  
   ]
  </code></pre>
  
  <p>My intended result array is as follows. My goal is, loop over every subscription, then loop over every user, return every user that has a companyId that matches a subscription's companyId. So subId 100 and 300 are returned twice since companyA has 2 users.</p>
  
  <pre><code>resultArray = [
   {
    "subId" : 100,
    "companyId" : 5,
    "companyName" : "CompanyA",
    "domain" : "companyA.com",
    "name" : "John",
    "email" : "john@companyA.com"
   },
   {
    "subId" : 100,
    "companyId" : 5,
    "companyName" : "CompanyA",
    "domain" : "companyA.com",
    "name" : "Frank",
    "email" : "frank@companyA.com"
   },
   {
    "subId" : 200,
    "companyId" : 6,
    "companyName" : "CompanyB",
    "domain" : "companyB.com",
    "name" : "Bill",
    "email" : "bill@companyB.com"
   },
   {
    "subId" : 300,
    "companyId" : 5,
    "companyName" : "CompanyA",
    "domain" : "companyA.com",
    "name" : "John",
    "email" : "john@companyA.com"
   },
   {
    "subId" : 300,
    "companyId" : 5,
    "companyName" : "CompanyA",
    "domain" : "companyA.com",
    "name" : "Frank",
    "email" : "frank@companyA.com"
   },
  
  ]
  </code></pre>
  
  <p>I am trying something like this.</p>
  
  <pre><code>var newArray = [];    
  
  subscriptionArray.forEach(function(subscription) {
    companyIdA = subscription.companyId;
  
    userArray.forEach(function(user) {
      companyIdB = user.companyId;
      if(companyIdB === companyIdA) {
  
          //Below I am trying to add a key 'subId' to the user 
          //object before pushing it to newArray.
  
        user.subId = subscription.subId;
        newArray.push(user)
      }
  
    })
  })
  </code></pre>
  
  <p>So the code above is returning the correct amount of results, but it is obviously just returning the user object information and not any information from the subscriptionArray. I tried to add in a new key/value for subId before pushing the object into the newArray, but this just ends up repeating the same subId for every similar company(I believe because it's looping over one subscription, then the entire userArray, then goes to the next subscription, but the subId isn't being changed.)</p>
  
  <p>I am working with a larger data set, about 40 subscriptions and 6 companies and I am just trying to get one single array of objects where each object is a user, associated with a company, associated with a subscription(which would make subscriptionId's repeat if a company has multiple users). </p>
  
  <p>Environment: Google Apps Script. I am trying to not use jQuery and I believe GAS doesn't support LoDash. So if anyone has a solution in vanilla JS that would be perfect!</p>