Creating a JavaScript global array with static elements?

Question

*"It's really annoying in JavaScript that any changes I make to a global array inside a function won't exist outside that function..."* It certainly *would* be annoying, if it were remotely true. It isn't. — T.J. Crowder, Jul 11 '13 at 17:52
how is your array global? it looks like you are declaring it in your `.ajax` function??? — dm03514, Jul 11 '13 at 17:54
You're probably declaring "bigArray" inside your Ajax code with `var`, which makes it a local variable, not global. — Pointy, Jul 11 '13 at 17:54
Welcome to the wonderful world of **async**! You need to wait. — SLaks, Jul 11 '13 at 17:55
@SLaks: I'm not seeing the async aspect, either. He says he's waiting for a click, and splicing the value out of the array. He doesn't say he's making another server call. (It's unclear, though, why the splice is shown as pseudo-code rather than code.) — T.J. Crowder, Jul 11 '13 at 17:57
Please see my EDIT. I thought it was obvious that I was declaring the array globally. — aadu, Jul 11 '13 at 18:02
*"OK, fine, here's my code:"* Nice attitude. Really encourages people to help you. — T.J. Crowder, Jul 11 '13 at 18:24
haha, actually I did. Didn't read the username between here and your answer. — aadu, Jul 11 '13 at 18:30

T.J. Crowder · Accepted Answer · 2013-07-11T18:22:29.860

The problem isn't that removeFunction doesn't have access to bigArray. The problem is in your onclick attribute, and the id you're putting on the link:

$('#div').append("<a href='#' id='bigArray[i]' onclick='removeFunction(bigArray[i])'>Element bigArray[i]</a><br />");

In the onclick, you're referring to i, but A) I'm guessing i isn't a global, and B) Even if it is, it will not have the value of i that you used to render that row. The code will look for the value of a global i variable as of when the link is clicked.

Separately, you're creating multiple elements with the same id value, which is bigArray[i] (not bigArray[0], bigArray[1], etc.)

You could use the value instead, like this:

$('#div').append("<a href='#' id='bigArray[" + i + "]' onclick='removeFunction(" + i + ")'>Element bigArray[i]</a><br />");

The changes there are:

For the id, I changed it to: "...id='bigArray[" + i + "]'", which will output id='bigArray[0]', then id='bigArray[1]', etc., instead of repeatedly outputting id='bigArray[i]' (literally.
I just pass the index into removeFunction, again by putting the value there, not a reference to the variable i: "... onclick='removeFunction(" + i + ")' ..."

Then your removeFunction would be:

function removeFunction(i) {    // <== i, not id
    bigArray.splice(i, 1);      // <== real code, not pseudocode
    renderArray(bigArray);
}

I would not recommend doing it that way, but it's the minimal fix.

There's no need to pass bigArray to anything. It's a global.

FWIW, I would recommend refactoring so you don't have to re-render the whole thing every time.

Yeah, so you've got it there. I don't want to pass the big long array through the onclick function. But I can't think of a better way to do it. You say it's global, but if I try splice an element out of it in the removeFunction function, it says the Array is empty, when it's definitely not. — aadu, Jul 11 '13 at 18:19
@AzzyDude: First off: Passing an array into a function doesn't copy all of its elements, so the size of the array is irrelevant. It just passes a reference. Secondly: I'd missed something which I've justed edited to correct. — T.J. Crowder, Jul 11 '13 at 18:23
I meant each element in my HTMl would have the whole array in it so it could be passed to the function onclick. — aadu, Jul 11 '13 at 18:27
@AzzyDude: Certainly no need for that. Did you see my points above? Did you have further questions? — T.J. Crowder, Jul 11 '13 at 18:28

score 0 · Answer 2 · answered Jul 11 '13 at 17:53

0

Define a variable at the global scope first that will hold your "bigArray", then assign the value to it once you receive the data through your ajax call.

var bigArray;

$.ajax({
    bigArray = bigArrayFromAjax;
    renderArray(bigArray);
});

... then your other functions should have access to it.

answered Jul 11 '13 at 17:53

jrthib

1,319
1
12
17

The code as presented falls prey to [*The Horror of Implicit Globals*](http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html) and so the other functions have access to it anyway. – T.J. Crowder Jul 11 '13 at 17:53
1

Your comments are extremely poetic. I like it. – jrthib Jul 11 '13 at 17:55
The problem with this, is for this to work, when I render each element to the page, I will have to pass the ENTIRE array into the HTML for each element. – aadu Jul 11 '13 at 18:05
So that when you click on the element in the HTML, it can pass the array to the desired function. – aadu Jul 11 '13 at 18:06
@AzzyDude: No. The whole point is that globals are **global**. You don't have to pass them around. That's their power (and their problem). – T.J. Crowder Jul 11 '13 at 18:07

Creating a JavaScript global array with static elements?

2 Answers2