Passing parameters to a class function in JavaScript

Question

This is a weird one - I'm debugging some JavaScript code in Chrome and I've found that when I'm passing parameters to a class function they're not actually getting passed? The weird thing is, sometimes this code works - other times it doesn't.

Here's what I've got (I've trimmed down the code a bit and removed what I think is unnecessary)

<script type="text/javascript">
    $(document).ready(function () {
        var agentID = 'abcd-1234';
        var isCurrent = 'true';
        var colourUtilities = new ColorUtilities();
        var palette = colourUtilities.GeneratePalette(["#2c2656","#362d68","#3f3579","#483d8b","#51459d","#5a4dae","#6a5db8"]);

        GetData();

        function GetData() {
            var url = 'WebRequest.ashx?agentID=' + agentID + "&isCurrent=" + isCurrent;

            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                success: function (data) {
                    BuildCharts(data);
                },
                error: function (XMLHttpRequest, status, errorThrown) {
                    alert(errorThrown);
                }
            });
        }

        function BuildCharts(data) {
            BuildSummaryBubbleChart(data);
        }

        function BuildSummaryBubbleChart(data) {
            var statusDistributionLabels = [];
            var statusDistributionCounts = [];

            for (var status in data) {
                statusDistributionLabels.push(status);
                statusDistributionCounts.push(data[status])
            }
            var chartBuilder = new ChartBuilder(palette, palette[0]);
            var canvasName = "cVacateDistribution";
            chartBuilder.BuildBubbleLineChart(canvasName, statusDistributionLabels, statusDistributionCounts, "No data available.");
        }
});

This part all works correctly - as you can see when I'm debugging in chrome, everything has a value when I call chartBuilder.BuildBubbleLineChart: - as you can see, chartBuilder has a value, the canvasName variable has a value and is being passed correctly, the arrays have values.

And yet - continuing to debug, when we jump into the BuildBubbleLineChart function, the values are all undefined:

I can't for the life of my figure out what's wrong. This is the code for the ChartBuilder class (cut down):

function ChartBuilder(palette, mainColor) {
var thisBuilder = {};
var charts = [];

//Builds a horizontal chart of circles separated by lines with labels
thisBuilder.BuildBubbleLineChart = function ({
    canvasID,
    labels,
    data,
    noDataMessage = 'No data',
    symbols = null } = {}) {
    var canvas = document.getElementById(canvasID);

    if (canvas == undefined) {
        console.log('Error: (BuildBubbleLineChart) Your canvas could not be found');
        return;
    }

    thisBuilder.ClearChart(canvasID);

    var ctx = canvas.getContext('2d');
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    if (NoData(data)) {
        canvas.width = 200;
        FillNoDataText(ctx, noDataMessage, 100, canvasHeight / 2);
        PushCustomChart(canvasID);
        return;
    }

    //etc - goes on to build the chart
}

There's a tonne of other functions within the ChartBuilder class but none are called/used at any point.

My problem is that when I call the BuildBubbleLineChart function and pass it values, it obviously gets to the function and has no values, so it logs the error Error: (BuildBubbleLineChart) Your canvas could not be found and returns.

Any help is greatly appreciated!

It's either you're using the brackets incorrectly in the thisBuilder.BuildBubbleLineChart, so you have to fix them, or you're calling it incorrectly because you cannot pass it parameters like mentioned in the previous comment. Is it you who wrote this function? — Racil Hilan
– Racil Hilan, Commented Oct 31, 2017 at 1:37
I wrote the call but not the function in ChartBuilder. But that's the weird thing - if it expects an object instead of parameters, why does it sometimes work? — Corey Thompson
– Corey Thompson, Commented Oct 31, 2017 at 1:39
Things don’t just “sometimes” work in JavaScript. Either they work, or they don’t. Can you show an example where everything works as expected? — Sebastian Simon
– Sebastian Simon, Commented Oct 31, 2017 at 1:41
You're right, it used to work until someone updated the ChartBuilder function without telling anyone >:( — Corey Thompson
– Corey Thompson, Commented Oct 31, 2017 at 1:54

Sebastian Simon · Accepted Answer · 2017-10-31 01:50:49Z

3

Look closely at the parameters:

thisBuilder.BuildBubbleLineChart = function({
    canvasID,
    labels,
    data,
    noDataMessage = "No data",
    symbols = null
  } = {}){

…

These are destructured parameters, so the function expects an object like this to be passed: { canvasID: "…", labels: […], data: "…", noDataMessage: "…", symbols: […] }. It does not expect multiple parameters to be passed as individual values.

If no parameter is passed, the empty object {} with the given default values is used. Since the string "cVacateDistribution" has none of the properties canvasID, labels, data, noDataMessage or symbols, all of those are going to be their default values or undefined.

edited Oct 31, 2017 at 1:50

answered Oct 31, 2017 at 1:39

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Corey Thompson Over a year ago

Turns out someone modified the ChartBuilder class and committed it without telling me, which broke my chart. Thank you very much for this!

Collectives™ on Stack Overflow

Passing parameters to a class function in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related