Test with html containing javascript

by afrankel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="console-log"></div>
<script>
// INCLUDING JavaScript Class here so I can embed just the  
// JavaScript portions of code I wan't to share in the blog

const apiURL = 'https://floating-meadow-81947.herokuapp.com/api'

// Simulation of a fictitious bank
// Assuming that all of the processing occurs via a database or API
class SolutionStreetBank {

  // Get customer record
  getCustomer(custId) {
    return axios.get(apiURL + '/Customers/' + custId)
    .then(response => {
      return response.data;
    })
    .catch(error => {
      console.log(error);
    })
  }

  // Get Accounts based on Customer ID
  getAccounts(custId) {
    var self = this;
    return axios.get(apiURL + '/Accounts')
    .then(response => {
      // filter array results based on Customer ID
      return self.filterResults(
        custId, 'custId', response.data);
    })
    .catch(error => {
      console.log(error);
    });
  }

  // Get Transactions based on Account ID
  getTransactions(accountId) {
    var self = this;
    return axios.get(apiURL + '/Transactions')
    .then(response => {
      // filter array results based on Account ID
      return self.filterResults(
        accountId, 'accountId', response.data);
    })
    .catch(error => {
      console.log(error);
    });
  }

  // Helper function to delay to request for demo purposes
  // if you want to delay a call 2 seconds for example use this 
  // statement prior to a call:
  // 
  // return this.delay(2000).then(function() {
  delay(time, value) {
    return new Promise(function(resolve) { 
        setTimeout(resolve.bind(null, value), time)
    });
  }

  // Helper function to return subset of array that matches id
  filterResults(id, idName, array) {
    let returnArray = []
    for( var i=0; i<array.length; i++) {
      if(array[i][idName] === id) {
       ...

CSS

.console-line {
  font-family: monospace;
  margin: 2px;
}

JavaScript 1.7

async function getAllDataAsync() {
  const bank = new SolutionStreetBank()
  console.log("getting customer...");
  const cust = await bank.getCustomer(1)
  console.log("getting accounts...");
  const accounts = await bank.getAccounts(cust.id)
  console.log("getting transactions..."); 
  // to simplify we'll just get transactions based on the first account
  const transactions = await bank.getTransactions(accounts[0].id)
  console.log('getAllDataAsync\n', 
    { cust, accounts, transactions })
  return; // normally returns a Promise
}

getAllDataAsync();