Aurelia-Datatable and data from Ajax call

Help Requests
1

I am following this example here (https://aurelia-datatable.spoonx.org/usage.html) to get the datatables plugin to display data that I get back from an ajax call.

My html looks like this:

 <template if.bind="customerRecord">
    <b>Phone/Fax/Email Information</b>
                                <datatable
                                columns="descr as 'Phone/Fax/Email', phone as 'Phone'"
                                footer.bind="footer"
                                resource="list"
                                repository.bind="list">
                            </datatable>
</template>

The template if.bind for customerRecord is the data I get back from Ajax, which is why I can not use attached() to load up my data (as far as I understand).

Here is the info from my js file:

import './style.css';
import {$, jquery} from 'jquery';
import {Client} from './client';
import {inject, TaskQueue} from "aurelia-framework";
//import { DOM } from "aurelia-pal";
import 'aurelia-bootstrap-datepicker';
import {Status_Codes} from './status_code';
import {commas, check_flag} from './utils';
import {HttpClient} from 'aurelia-fetch-client';
import {Router} from 'aurelia-router';
import {dataTable} from 'aurelia-datatable/datatable';
import {EntityManager} from 'aurelia-orm';

window.jQuery = jquery;
window.$ = jquery;

@inject(Client, Status_Codes, HttpClient, Router, TaskQueue, EntityManager)

export default class Customer {
    stat;
    client;
    
    columnDefinitions;
//    phone_list = [];
    //phone_list = [{phone: null, descr: null}];
    
    

    constructor(client, stat, httpClient, router, taskQueue, entityManager, dataTable) {
      this.gridOptions = [];
      this.columnDefinitions = []; 
      this.httpClient = new HttpClient();
        this.clientObj = client;
        this.statusObj = stat;
        this.router = router;
        this.defineGrid();
        this.taskQueue = taskQueue;
        this.clients;
        this.phone_list = [];

        // This is where I set up the repository for the Datatable data
        let repository = entityManager.getRepository('resource');

        this.userRepo = repository;

        let entities = this.userRepo.populateEntities(this.phone_list);
        this.list = entities;
}

async findArisId() {
        const self = this;
        self.cookie = document.cookie.split("=");
        
        self.user = self.cookie[1];

        if ( self.user )
        {
            var url = 'http://aris2.myaris.net/search.pl';
            url += '?REMOTE_USER=' + self.user;

            console.log( 'url: ', url );

            if ( self.cust_num )
            {
              var newCustNum = self.cust_num.replace( /#/, '' );
                url += '&aris_id=' + newCustNum;
            }

            if ( self.cust_info )
            {
                url += '&cust_info=' + self.cust_info;
                url += '&cust_info_field=' + self.selectedCustInfo;
            }

            if ( self.invoice_number )
            {
                url += '&invoice_number=' + self.invoice_number;
            }

            if ( self.po_number )
            {
                url += '&po_number=' + self.po_number;
            }

//            console.log( 'url', url );

            return self.httpClient
            .fetch(url)
              .then(async (response) => {
                let aris_idObj = await response.json(); 
//                console.log( 'response: ', aris_idObj ); 
                this.customerRecord = 
                  await this.getCustomerData(aris_idObj.customerData.aris_id);
                if( this.customerRecord )
                {
                  this.status_code_list = await this.statusObj.getStatusCodes(this.customerRecord[0].customer.debtor_id);  
                  this.selectedStatusCode = this.customerRecord[0].customer.status_code;
                  self.phone_list = this.customerRecord[3].phone;
                  console.log('customerRecord[3]', this.customerRecord[3]);
                  console.log('phone_list', self.phone_list);

                  console.log('entities', this.list);

                   // This is where I populate the Repository list
                  self.list = self.userRepo.populateEntities(self.phone_list);

                  console.log( 'entities', this.list );

                  //console.log('status_code_list', this.status_code_list);
                }
                  return this.customerRecord;
              });
  
        }
    }

When I run the app, I don’t get any errors, I just get a blank section where the dataTable should be, and I’m not sure why?

I feel like I am missing something key, but I don’t know enough to know what it is?

Has anyone else run into this problem?