title: Promises.all with additional values
body: <p>New to promises, would like to learn.
  I have this array of shopIds:</p>
  
  <pre><code>let shopIdsArray = ['shop1','shop2','shop3'];
  </code></pre>
  
  <p>and an external promise call</p>
  
  <pre><code>getProducts(shopId, 'products') //promise returns the products of this shop
  </code></pre>
  
  <p>Unfortunately, the promise does not return the shopId, just the products, so I have to somehow keep the shopId and store it together with the products once the promise is finished.
  My current approach is to call the promise with each shopId, and add the result of each promise call to a shopsAndProductsArray like this:</p>
  
  <pre><code>shopsAndProductsArray.push({
      "id":shopId,
      "products":products
  }); 
  </code></pre>
  
  <p>Later on, my "wrapper promise" should return the finished shopsAndProductsArray.</p>
  
  <p>My current code (node, ES6) looks like:</p>
  
  <pre><code>updateProducts = new Promise(
  
      function (resolve, reject) {
          let shopIdsArray = ['shop1','shop2','shop3'];
          const shopsAndProductsArray = [];
          let promisesArray = [];
  
          shopIdsArray.forEach((shopId) =&gt; {
              let promise = getProducts(shopId, 'products')
                      .then((products) =&gt; {
                          const shopInfoObject = {
                                   "id":shopId,
                                   "products":products
                          };
                          console.log("sio: ",shopInfoObject); //prints shopIds and products fine.
                          shopsAndProductsArray.push(shopInfoObject);
                          promisesArray.push(promise);
                      });
  
          });
  
          Promise.all(promisesArray)
              .then(function (shopsAndProductsArray) {
                  resolve(shopsAndProductsArray); //the shopsAndProductsArray is undefined?
              });
      }
  );
  </code></pre>
  
  <p>On resolve, the shopsAndProductsArray is...not empty, but consists of the same number of entries as the shopIdsArray, but the array items are undefined. I probably should put the promises into an array first, then work on them in Promise.all, but at that point I lost the reference to which shop id the promise belongs. </p>
  
  <p>I read many other examples about iteration and promises and tried many other ways but it seems that I haven't fully understood what is called at which point. I'm sure filling the promises array the way I do is wrong, but I had no better idea how to invoke Promise.all.</p>
  
  <p>I think I could narrow my questions down to:</p>
  
  <ol>
  <li>How should I iterate over the shopIds, calling the promise with
  each?</li>
  <li>How can I preserve the shopId once a promise returns a list of products?</li>
  <li>How can I return the array of shopIds and products once all shopIds have been processed?</li>
  </ol>
  
  <p>Thanks in advance for any help.</p>
  
  <p>EDIT:
  Thank you so much, justelouise and Felix Kling. I knew I was overcomplicating things, but couldn't put my finger where. I understand now what I was missing, thanks to your examples.
  I think your answers are essentially equal and both thoroughly explained. I give the accept checkmark to justelouise because she appears to be first and Felix Kling has slightly more reputation O_o.</p>