JavaScript - setting arrays containing variables in the array

Question

I'm getting an error through a piece of script when using variables in setting an array. If I just replace the variables with number values they have (which I have verified) I don't get an error.

Is there anything wrong with setting an array like this?

arrayOfData = new Array(
            [leftAmount, 'Get', '#2697C9'],
            [middleAmount, 'Neutral', '#E7E7E7'],
            [rightAmount, 'Don\'t Get', '#EB5830']
        );

You can see the whole function if it's helpful

function generateChart(viewerObj){

        if(viewerObj.getActiveUsers){
            var leftAmount = viewerObj.getActiveUsers;
        }
        else{
            window.leftAmount = 0;
        }
        if(viewerObj.getActiveUsers){
            var middleAmount = viewerObj.getActiveUsers;
        }
        else{
            var middleAmount = 0;
        }
        if(viewerObj.dontGetActiveUsers){
            var rightAmount = viewerObj.dontGetActiveUsers;
        }
        else{
            var rightAmount = 0;
        }

        arrayOfData = new Array(
            [leftAmount, 'Get', '#2697C9'],
            [middleAmount, 'Neutral', '#E7E7E7'],
            [rightAmount, 'Don\'t Get', '#EB5830']
        );

        $('.divGraph').jqBarGraph({ data: arrayOfData }); 
    }

score 1 · Accepted Answer · answered Aug 03 '12 at 23:03

Only potential issue I can see is that most of the time you have...

var variable_name

...in both the if and else, but one time you have this...

if(viewerObj.getActiveUsers){
    var leftAmount = viewerObj.getActiveUsers;
}
else{
    window.leftAmount = 0;
}

...therefore when the if condition fails, the local leftAmount will be undefined, and will be shadowing the global leftAmount, which has the 0 value.

I'd guess that wherever you're using that Array, it doesn't like the undefined substitute for 0.

Change window.leftAmount to var leftAmount, or better, move your variable declarations to the top of the function.

function generateChart(viewerObj){
    var leftAmount = 0, middleAmount = 0, rightAmount = 0;

    if(viewerObj.getActiveUsers)
        leftAmount = viewerObj.getActiveUsers;

    if(viewerObj.getActiveUsers)
        middleAmount = viewerObj.getActiveUsers;

    if(viewerObj.dontGetActiveUsers)
        rightAmount = viewerObj.dontGetActiveUsers;

    arrayOfData = new Array(
        [leftAmount, 'Get', '#2697C9'],
        [middleAmount, 'Neutral', '#E7E7E7'],
        [rightAmount, 'Don\'t Get', '#EB5830']
    );

    $('.divGraph').jqBarGraph({ data: arrayOfData }); 
}

Here I also set the default initialization at the top. If you prefer, you can move it back to the else, or you can use the conditional operator...

rightAmount = viewerObj.dontGetActiveUsers ? viewerObj.dontGetActiveUsers : 0;

Or since you're doing a basic truthy/falsey test, you could do this...

rightAmount = viewerObj.dontGetActiveUsers || 0;

Thanks for the pointers! I did just change that and forgot to change the one variable. I'm using jqBarGraph to creat a dynamic bar graph and the problem may be with it. I get this error: Uncaught TypeError: Object 00 has no method 'toFixed' - but only when putting in the variables. I'll try making some of your changes to see if it affects anything. — Shane Loveland, Aug 03 '12 at 23:12
@ShaneLoveland: The `toFixed` method is a method on Numbers, so make sure all your values are passing actual numbers, and not strings or something else. For example, if `viewerObj.dontGetActiveUsers` is a *boolean* or *string* or some other type, it won't work. Those properties sound like they may be holding *boolean* values. — , Aug 03 '12 at 23:14
Awesome - that was the problem! The numbers were strings - that did it! — Shane Loveland, Aug 03 '12 at 23:18

score 0 · Answer 2 · edited May 23 '17 at 12:12

The only oddity I can spot is your use of window.leftAmount. Why did you write that? If viewerObj.getActiveUsers is not truthy now, the local variable leftAmount will be undefined.

However, you can shorten your script a lot using the OR operator instead of various if-clauses (How it works):

var arrayOfData = [
  [viewerObj.getActiveUsers || 0, 'Get', '#2697C9'],
  [viewerObj.getActiveUsers || 0, 'Neutral', '#E7E7E7'],
  [viewerObj.dontGetActiveUsers || 0, 'Don\'t Get', '#EB5830']
];

$('.divGraph').jqBarGraph({ data: arrayOfData });

score -1 · Answer 3 · answered Aug 03 '12 at 23:08

you're using var to restrict the scope of those variables to the if/else blocks and then trying to use the variables outside of that scope which causes them to be undefined. I would recommend declaring the variables in the same scope you're trying to use them.

function generateChart(viewerObj){

        var leftAmount = 0, middleAmount = 0, rightAmount = 0; // declare variables in this scope.

        if(viewerObj.getActiveUsers){
           leftAmount = middleAmount = viewerObj.getActiveUsers;
        }

        if(viewerObj.dontGetActiveUsers){
           rightAmount = viewerObj.dontGetActiveUsers;
        }

        arrayOfData = new Array(
            [leftAmount, 'Get', '#2697C9'],
            [middleAmount, 'Neutral', '#E7E7E7'],
            [rightAmount, 'Don\'t Get', '#EB5830']
        );

        $('.divGraph').jqBarGraph({ data: arrayOfData }); 
    }

JavaScript doesn't have block scope. Using `var` inside the `if/else` statement blocks still declares them in the function scope. — , Aug 03 '12 at 23:09
oh interesting, I thought it did. Thanks for clearing that up. — driangle, Aug 03 '12 at 23:12

JavaScript - setting arrays containing variables in the array

3 Answers3