title: Async Await with four nested loops
body: <p>I am currently trying to return a JSON object array that requires me to do one asynchronous function and then four nested asynchronous map functions in order to populate an array of entities. Basically, each user has an array of orders, each order has an array of items, each item has an array of options and each option has an array of values. I am using loopback4 framework and therefore cannot do res.send once all things have been populated. The function seems to return on the first await, but any await after that, it does not wait on it and instead runs to the end of the function. I have tried using Promises and .thens(), but cannot seem to figure out how to populate each entity fully nested, and then return the array of populated entities. I keep getting an empty array. Below is only one nest of maps, but I cannot get it to even populate up to the first nest and return this, so I decided not to go any further. This is the code:</p>
  
  <pre><code>async getUserOrders2(@param.path.number('id') id: number): Promise&lt;any&gt; {
        if ( !this.user) {
          throw new HttpErrors.Unauthorized(AuthErrorKeys.ClientInvalid);
        }
        else if (this.user.id != id) {
          throw new HttpErrors.Unauthorized(AuthErrorKeys.ClientInvalid);
        }
        else  {
          let restaurantId = this.user.restaurantId
          let orderFrameArray = new Array&lt;OrderFrame&gt;()
          return this.restaurantRepository.orders(restaurantId as string).find()
          .then(async orders =&gt; {
            orders.map(async (val, key)=&gt; {
              let orderFrame = new OrderFrame(val)
              orderFrame.itemArray = await this.orderRepository.orderItems(val.id).find()
              orderFrameArray.push(orderFrame)
            })
            orderFrameArray = await Promise.all(orderFrameArray)
            return orderFrameArray
          })
        }
  }
  </code></pre>
  
  <p>The function is returning before the orderFrameArray has been populated. I need four nested map loops and this first one is not working, so I am not sure how to do the rest. Any help would be extremely appreciated.</p>
  
  <p>Based on @Tomalaks solution I tried the following, but its still only returning the top level array and nothing is nested:</p>
  
  <pre><code>    async getUserOrders2(@param.path.number('id') id: number): Promise&lt;any&gt; {
        if ( !this.user) {
          throw new HttpErrors.Unauthorized(AuthErrorKeys.ClientInvalid);
        }
        else if (this.user.id != id) {
          throw new HttpErrors.Unauthorized(AuthErrorKeys.ClientInvalid);
        }
        else  {
          let restaurantId = this.user.restaurantId
          let orderFrameArray = new Array&lt;OrderFrame&gt;()
          return this.restaurantRepository.orders(restaurantId as string).find()
            .then(orders =&gt; {Promise.all(orders.map(
            order =&gt; { 
            let orderFrame = new OrderFrame(order)
            orderFrame.itemArray = new Array&lt;Item&gt;()
            this.orderRepository.orderItems(order.id).find()
              .then(orderItems =&gt; Promise.all(orderItems.map(
              orderItem =&gt; {
              let itemFrame = new Item(orderItem)
              itemFrame.options = new Array&lt;Option&gt;()
              this.orderItemRepository.orderItemOptions(orderItem.id).find()
                  .then(orderItemOptions =&gt; Promise.all(orderItemOptions.map(
                  orderItemOption =&gt; { 
                  let optionFrame = new Option(orderItemOption)
                  optionFrame.values = new Array&lt;Value&gt;()
                  this.orderItemOptionRepository.orderItemOptionValues(orderItemOption.id).find()
                      .then(orderItemOptionValues =&gt; Promise.all(orderItemOptionValues.map(
                      orderItemOptionValue =&gt; { 
                      let valueFrame = new Value(orderItemOptionValue)
                      optionFrame.values.push(valueFrame)})))
                  itemFrame.options.push(optionFrame)})))
                orderFrame.itemArray.push(itemFrame)})))
              orderFrameArray.push(orderFrame)}))
            return orderFrameArray})
        }
      }
  </code></pre>
  
  <p>I apologize for the formatting I wasn't sure how best to format it. Is there something else I'm doing wrong?</p>
  
  <p>Thanks to everyone for their response. The answer that was posted by @Tomalak was correct. I just had to surround the entire function in brackets, and put a .then to return the populated entity I had made</p>