How to send multiple(2) object to one context and access them using {{#each}} tag

//routes.js
{
path: ‘/menu-item-desc-cart/:menuItemId’,

async: function (routeTo, routeFrom, resolve, reject) {
  // Router instance
  var router = this;

  // App instance
  var app = router.app;

  // User ID from request
  var menuItemId = routeTo.params.menuItemId;

  // Show Preloader
  app.preloader.show();

  getMenuItemDetails(menuItemId);

  function getMenuItemDetails(menu_item_id) {
    var menuItems = [];
    var addonItems = [];
    // We got user data from request
    myDB.transaction(function (transaction) {
     
      var query = "SELECT * FROM menus_items where item_id = ?";
      transaction.executeSql(query, [menu_item_id], function (tx, results) {

        var len = results.rows.length;

        for (var i = 0; i < len; i++) {

          menuItems[i] = results.rows.item(i);

        }

      var query1 = "SELECT * FROM addons where item_id = ?";
      transaction.executeSql(query1, [menu_item_id], function (tx, results1) {

        var len = results1.rows.length;

        for (var i = 0; i < len; i++) {

          addonItems[i] = results1.rows.item(i);

        }
      }, function(error){
        console.log(error.message);
      });

        console.log();
        
        menuAddon = [menuItems,addonItems];
        console.log(menuAddon);
        // Hide Preloader
        app.preloader.hide();

        // Resolve route to load page
        resolve(
          {
            templateUrl: './pages/page-add-to-cart.html',
          },
          {
            context: {
              menuAddon,
              //menuData: menuItems,
              //addonData: addonItems,
             
            }
          }
        );

      }, null);

    });

  };
}

},

//page-add-to-cart.html

close_round

<div class="page-content">
    
    
    {{#each menuAddon[0]}}
    <div style="background-image: url({{js "cordova.file.externalDataDirectory"}}data/{{ js " this.item_img.split(',')[0] " }})"
        class="card-header card-head-add-to-cart align-items-flex-end">
    </div>
    <div class="card-content card-content-padding">
        <p class="date text-align-center">{{#if ../$root.langboolval}} {{this.arabic_item_name}} {{else}} {{this.item_name}} {{/if}}</p>
        <p class="date text-align-center">
            <a href="#">
                <i class="icon f7-icons color-custom">money_dollar_round</i>{{ this.price }}
            </a>
        </p>
        <br>
        <p>
            <div class="list">
                <ul>
                    <li>
                        <a class="item-link smart-select smart-select-init" data-open-in="sheet">
                            <select name="flavor" id="flavor">
                                <option value="NA" selected>{{../$root.langarray.noselected}}</option>
                                {{#each this.flavor.split(',')}}
                                <option value="{{this}}">{{this}}</option>
                                {{/each}}
                            </select>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">{{../$root.langarray.chooseform}}</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    
                </ul>
            </div>
        </p>
        <div class="block block-strong text-align-center">
            <div class="row">
                <div class="col">
                    <div class="stepper stepper-fill stepper-init" data-wraps="true" data-autorepeat="true"
                        data-autorepeat-dynamic="true">
                        <div class="stepper-button-minus"></div>
                        <div class="stepper-input-wrap">
                            <input type="text" value="1" min="1" max="10" step="1" readonly>
                        </div>
                        <div class="stepper-button-plus"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="block block-strong text-align-center">
            <div class="row">
                <div class="col">
                    <div class="item-title item-label">{{../$root.langarray.note}}</div>
                    <div class="item-input">
                        <textarea style="background-color:rgba(33, 149, 243, 0.493); width:100%"
                            placeholder="{{../$root.langarray.writenote}}" rows="4"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{/each}}
    
    <li>
        <a class="item-link smart-select smart-select-init" data-open-in="sheet">
            <select name="flavor" id="flavor">
                <option value="NA" selected>{{../$root.langarray.noselected}}</option> 
               
                {{#each menuAddon[1]}} 
                <option value="{{this.addondescarabic}}">{{>addondescarabic}} </option>
                {{/each}}                      
            </select>
            <div class="item-content">
                <div class="item-inner">
                    <div class="item-title">{{../$root.langarray.chooseform}}</div>
                </div>
            </div>
        </a>
    </li>
    
    <p class="date text-align-center" style="width:100%">
        <a href="/menu-item-insert-in-to-order/{{ this.item_id }}/"
            style="padding: 2vh; color: white; background-color:rgba(33, 149, 243, 0.89);" class="link">
            {{../$root.langarray.addtocart}}
        </a>
    </p>
    
    
    
    
</div>

<script> return {

}

</script>

Your question is how to concatenate multiple arrays in JavaScript.

var a = ['a', 'b', 'c'];
var b = ['d', 'e', 'f'];

var result = [...a, ...b];
console.log(result) // -> ['a', 'b', 'c', 'd', 'e', 'f']