I want to load data in chunks when the scroll hits the bottom on a div element.
The variable 'ab' already has some data which is loaded when the app loads, here in the below code I am pulling in the next set of data and appending that data to the same 'ab' variable. For some reason I get HTML errors saying "[LWC error]: Invalid template iteration for value "undefined".

@track ab = [];

  @track abOffsetValue = 5;

theScroll(e) {
    let el = e.currentTarget;
    if(el.scrollHeight - el.scrollTop - el.clientHeight < 1){
      loadMoreCities ({
        province: e.target.dataset.id,
        offsetValue: this.abOffsetValue
      }).then(result => {
        this.ab.push(result);
        console.log(JSON.stringify(result));
      })
      .catch(error => {
        
      })
    }
  }

Here is the HTML

<lightning-card class="slds-p-right_small" variant="narrow" icon-name="utility:tracker">
    <h1 slot="title" style="font-style:normal; font-family:'Candara';"><strong>ALBERTA</strong></h1>
    <div id="abDiv" class="testClass" onscroll={theScroll} data-id="AB">
    <template for:each={ab} for:item="city">       
        <div class="flex-container" key={city.Id}>
            <div class="flex-box-1">
                <div style="color: rgb(28, 69, 145);"><strong>{city.Name}</strong></div>
            </div>
            <div style="display:flex;margin: 6px 30px 0px 30px;">
                <div>
                    <lightning-icon icon-name="utility:company" size="small"></lightning-icon>
                </div>
                <div style="margin:8px 0px 0px 3px; color:rgb(11, 59, 11);font-size:11.5px">
                    <b>{city.sumchans__Total_Buildings__c}</b>
                    <!-- <strong>10000000</strong></p> -->
                </div>
            </div>
            <div class="flex-box-2">
                <template for:each={city.sumchans__City_Stats__r} for:item="stats">
                    <div class="penetration slds-p-around_x-small" key={stats.Id}
                        style="color: rgb(197, 81, 61);font-size:14px">
                        <strong>{stats.sumchans__Penetration__c}%</strong></div>
                </template>
            </div>
        </div>
    </template>
</div>
</lightning-card>