Filling an array with Ajax/Json data from another view

5

Ok. I wrapped my ajax call in a promise like so:

client.js:

import jquery from 'jquery';

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

export class Client {
    constructor()
    {
        this.client_list = null;
        this.valid_client_list();
        this.cookie = null;
    }

    
    
    valid_client_list() {

        const self = this;

        self.cookie = document.cookie.split("=");
        self.user = self.cookie[1];

        if ( self.user )
        {
            var url = 'http://aris2.myaris.net/client_list.pl';

            return new Promise( function(resolve, reject) {
              jquery.ajax({
                type: "GET",
                url: url, // URL of the Perl script
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
                headers: { 'Access-Control-Allow-Origin': '*' },
                mode: 'no-cors',
                crossDomain: true,
                jsonp: 'callback',
                // send username to build client list
                data: "REMOTE_USER=" + self.user,
                // script call was *not* successful
                error: function(XMLHttpRequest, textStatus, errorThrown) { 
                  console.log("responseText: " + XMLHttpRequest.responseText 
                    + ", textStatus: " + textStatus 
                    + ", errorThrown: " + errorThrown);
                }, // error 
                // script call was successful 
                // data contains the JSON values returned by the Perl script
                success: function(data){
                  if (data.error) { // script returned error
                    console.log( 'error: ' + data.error );
                  } // if
                  else { // got the list
                    //for (var i = 0; i < data.clients.length; i++ )
                    //{
                    //    console.log( 'client: ' + i + ' ' + data.clients[i] );
                    //}
                    
                    resolve(data);
                    
                    //self.client_list = data.clients;           
                  } //else
                } // success
              }); // ajax
            });

            
        }
    }
}

and then in customer.js, I am trying to access the list. I’m still not clear how to access it. I want to use it to iterate over in a select->dropdown in the html.

customer.js:

import './style.css';
import jquery from 'jquery';
import {Client} from './client';
import {inject} from 'aurelia-framework';


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

@inject(Client)

export class Customer {
    constructor(client, api) {

        this.client = client;

        this.selectedClient = null;
        this.clients = this.client.valid_client_list().then( function(data) {
            console.log( '1 client_list: ' + data.clients );
        });

        console.log( '2 client_list: ' + this.clients );

        //console.log( 'data: ' + data.response );

        this.selectedCustInfo = null;

        this.custInfoField = [
            { value: 'All', display: 'All' },
            { value: 'Name', display: 'Name' },
            { value: 'Contacts', display: 'Contacts' },
            { value: 'City', display: 'City' },
            { value: 'My Notes', display: 'My Notes' },
            { value: 'All Notes', display: 'All Notes' },
            { value: 'Report As', display: 'Report As' },
            { value: 'Parent Customer', display: 'Parent Customer' },
        ];   
    }
}

When I log to console in the promise line, I get the data I expect. But when I try to log the value of this.clients, it’s undefined.

What do I need to do to access the data for html?

1 Like