0

I have created some API helpers in typescript to read/write data from Microsoft Dynamics 2016. I need to call the methods from these helpers in javascript from a page that is interacting with the API. I can't seem to get the code right to call the Get() method from the Web API. What code do I need to put in my $("#ExpenseButton").click callback to call the Get() method?

Javascript Code Compiled from Typescript

var WebAPI;
(function (WebAPI) {
    class ExpenseTransaction extends WebAPI.APIBase {
        constructor() {
            super();
        }
        ConvertToEntity(data) {
            let result = new Array();
            for (let i = 0; i < data.length; i++) {
                let newRecord = new Model.ExpenseTransaction();
                newRecord.ClientID = data[i]["_ccseq_clientid_value"];
                newRecord.ClientNumber = data[i]["ccseq_clientnumber"];
                newRecord.EmployeeFirstName = data[i]["ccseq_employeefirstname"];
                newRecord.EmployeeLastName = data[i]["ccseq_employeelastname"];
                newRecord.EmployeeID = data[i]["_ccseq_employeeid_value"];
                newRecord.ExpenseErrorCode = data[i]["ccseq_expenseerrorcode"];
                newRecord.GeneralLedgerName = data[i]["ccseq_generalledgername"];
                newRecord.GeneralLedgerNumber = data[i]["ccseq_generalledgernumber"];
                newRecord.GroupCode = data[i]["ccseq_groupcode"];
                newRecord.MasterCardPostedDate = data[i]["ccseq_mastercardposteddate"];
                newRecord.MasterCardTransactionDate = data[i]["ccseq_mastercardtransactiondate"];
                newRecord.MasterCardTransactionParentCompany = data[i]["ccseq_mastercardtransactionparentcompany"];
                newRecord.NAVCompanyCode = data[i]["ccseq_navcompanycode"];
                newRecord.NAVEmployeeID = data[i]["ccseq_navemployeeid"];
                newRecord.NAVGeographyCode = data[i]["ccseq_navgeographycode"];
                newRecord.NAVJobClassCode = data[i]["ccseq_navjobclasscode"];
                newRecord.NAVServiceCode = data[i]["ccseq_navservicecode"];
                newRecord.SetID = data[i]["_ccseq_setid_value"];
                newRecord.TransactionAmount = data[i]["ccseq_transactionamount"];
                newRecord.TransactionDate = data[i]["ccseq_transactiondate"];
                newRecord.TransactionDescription = data[i]["ccseq_transactiondescription"];
                newRecord.TransactionType = data[i]["ccseq_transactiontype"];
                newRecord.Vendor = data[i]["ccseq_vendor"];
                newRecord.StateCode = data[i]["statecode"];
                result[i] = newRecord;
            }
            return result;
        }
        Get(expenses) {
            if (Array.isArray(expenses)) {
                if (expenses[0] instanceof Model.ExpenseTransaction) {
                    return null;
                }
            }
            else {
                return Promise.resolve($.ajax({
                    url: this.Connection,
                    type: "GET",
                    contentType: "application/json",
                    dataType: "json",
                }));
            }
        }
        ;
        Create(expenses) {
            for (let i = 0; i < expenses.length; i++) {
                $.ajax({
                    url: this.Connection,
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(expenses[i].toJSON()),
                    success: function (data) {
                        alert("Success");
                    },
                    error: function (data) {
                        alert("error");
                    }
                });
            }
        }
        ;
    }
    WebAPI.ExpenseTransaction = ExpenseTransaction;
})(WebAPI || (WebAPI = {}));

Javascript Code for Page

(WebAPI || (WebAPI = {}));

$(document).ready(function () {
    setupHandlers();
});

function setupHandlers() {
    "use strict";

    $("#ExpenseButton").click(function () {
        // Put Code here
    });
}

Code I have Already Tried

// Error: Uncaught TypeError: WebAPI.ExpenseTransaction is not a constructor
let ex = new WebAPI.ExpenseTransaction();

// Error: Uncaught ReferenceError: ExpenseTransaction is not defined
let ex = new ExpenseTransaction();
Tim Hutchison
  • 3,483
  • 9
  • 40
  • 76
  • Shouldn't it be just new ExpenseTransaction(), without the WebAPI prefix? – Yeysides Apr 27 '17 at 15:41
  • @Yeysides - Got `Uncaught ReferenceError: ExpenseTransaction is not defined` error – Tim Hutchison Apr 27 '17 at 15:45
  • hmm, did you try declaring WebAPI as a module instead of an IIFE? http://stackoverflow.com/questions/13495107/any-way-to-declare-a-nest-class-structure-in-typescript – Yeysides Apr 27 '17 at 15:46
  • 1
    I went with namespaces because I didn't want to use something like RequireJS, but based on [this](https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html) it looks like es6 supports modules natively now so its probably worth another look – Tim Hutchison Apr 27 '17 at 15:54

1 Answers1

0

I think you have to create an instance of the ExpenseTransaction class.

Could you try something like:

function setupHandlers() {
    "use strict";

    $("#ExpenseButton").click(function () {
        var expenseTransaction = new WebAPI.ExpenseTransaction();
        var expenses = null;
        expenseTransaction.Get(expenses).then(function() {
          alert('hello world');
        });
    });
}

It seems that you are not self-invoking the function that add the class to the WebAPI.

Could you try something like:

(function(WebAPI) {
  // YOUR TYPESCRIPT CODE

})(); <-- Invoke the anonymous function

You must have something wrong with your WebAPI object. I have created a simplified version of your code here and it works.

https://jsfiddle.net/jruizx/aru02gja/

Jordi Ruiz
  • 487
  • 2
  • 11