Trouble publishing a list of values to Javascript to Bubble element

Need help
1

I’m trying to use Javascript to generate an amortization schedule for a mortgage and display all the data in a table element on the page.

I am using the Toolbox plugin and triggering the “Run Javascript” action in the workflow, and attempting to publish a list of values to the Javascript to Bubble element on the page. This list of values is then set as the data source for the table element. But, when I execute it, the Javascript to Bubble element’s value is empty, even though I can see in the console that the Javascript worked perfectly to generate the data as an array of JSON objects.

I’ve scoured the forums but haven’t found anything directly on this topic with the way I’ve set it up, so hoping somebody can advise me.

The type of data I’m using is not a Thing in Bubble, but one that I custom defined using the API connector by clicking “Manually enter API response” as shown here:

image
image702×440 18.6 KB

Here is how I set up the Javascript to Bubble element:

image
image345×852 42.2 KB

Here is my Javascript which returns an array of JSON objects formatted just like the image above:

function calculateEMI(principal, annualInterestRate, years) {
    // Convert annual interest rate to monthly rate
    var monthlyInterestRate = annualInterestRate / 12 / 100;

    // Convert years to months
    var months = years * 12;

    // Calculate EMI (Equated Monthly Installment)
    var EMI = principal * monthlyInterestRate * Math.pow(1 + monthlyInterestRate, months) / (Math.pow(1 + monthlyInterestRate, months) - 1);

    return EMI;
}

function generateAmortizationSchedule(principal, annualInterestRate, years) {
    var monthlyPayment = calculateEMI(principal, annualInterestRate, years);
    var monthlyInterestRate = annualInterestRate / 12 / 100;
    var months = years * 12;

    var amortizationSchedule = [];

    var remainingPrincipal = principal;

    for (var i = 1; i <= months; i++) {
        var interestPayment = remainingPrincipal * monthlyInterestRate;
        var principalPayment = monthlyPayment - interestPayment;

        var initialPrincipalBalance = remainingPrincipal;

        remainingPrincipal -= principalPayment;

        var finalPrincipalBalance = Math.max(remainingPrincipal, 0);

        var periodData = {
            "period": i,
            "initial_principal_balance": parseFloat(initialPrincipalBalance.toFixed(2)),
            "payment_amount": parseFloat(monthlyPayment.toFixed(2)),
            "interest_paid": parseFloat(interestPayment.toFixed(2)),
            "principal_repaid": parseFloat(principalPayment.toFixed(2)),
            "final_principal_balance": parseFloat(finalPrincipalBalance.toFixed(2))
        };

        amortizationSchedule.push(periodData);

        // Break the loop if remainingPrincipal is 0
        if (remainingPrincipal <= 0) break;
    }

    console.log(amortizationSchedule);
    return amortizationSchedule;
}

// Put in variables
var principal = Input 1's value;
var annualInterestRate = Input 2's value;
var years = Input 3's value;
var schedule = generateAmortizationSchedule(principal, annualInterestRate, years);

bubble_fn_amortization(schedule);

Here is a screenshot of the console and debugger, showing that the Javascript worked but the value of the Javascript to Bubble element is empty:

image
image948×651 96.8 KB

Can anybody see what the issue might be here?