Build dynamic multi-dimensional array

Question

I'm trying to build a multi-dimensional array dynamically.

The reason I want to build it dynamically is if the array grows to like 1 - 1000 in 5-number chunks.
It would be very time consuming to write it like this:

[1, 2, 3, 4, 5],,,,,[996, 997, 998, 999, 1000]

I've been struggling the whole day today, so I decided to post this question because I'm totally stuck right now.

This is the array I want to build dynamically (my earlier post which is solved):
Multi-dimensional array shuffle random

Once the dynamic array is built properly, I want to call the fisherYates() function with 'outerArr.forEach(fisherYates);' to get a result like this:

[4,2,3,5,1],[7,10,6,9,8],[11,15,12,14,13],[18,17,16,20,19],[22,21,25,23,24]

The array will be used to fadeOut/fadeIn pictures.
1. fadeIn first set of five random pictures 1-5
2. fadeOut first set
3. fadeIn second set of five random pictures 6-10
4. fadeOut second set
5. fadeIn third set of five random pictures 11-15
6. And so on....

I will use the array values like this:

$currImg = $('.rotator-image:visible', $currLi);
$next = $('.img' + outerArr[a][b], $currLi);
$currImg.fadeOut(1000);
$next.fadeIn(1000);

I've tried to solved this with the help of these links:
jQuery.map
Create multidimentional array with dynamic form
Pointy's code in this post.

Some notes: I prefer not to use the "var outerArr = new Array();". I read somwhere that it should be avoided(?). I would like to accomplish this the jQuery way, with .push and $.makeArray (and $.map) if that's possible. However, any approach is appreciated.

Here is the code I have (increase the Javascript window in JSfiddle to see my comments): (and also here)

function fisherYates(myArray) {
    var i = myArray.length, j, tempi, tempj;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        tempi = myArray[i];
        tempj = myArray[j];
        myArray[i] = tempj;
        myArray[j] = tempi;
    }
}

var outerArr = [];
var innerArr = [];
var fakeArr = 0;
var zz = 0;

for (var z = 1; z < 26; ++z) {
    ++zz;
    if (zz != 5) {
        fakeArr = fakeArr + z + ",";
    } else {
       fakeArr = fakeArr + z;
       var realArr = $.makeArray(fakeArr);
       innerArr.push(realArr);
       outerArr.push(innerArr);
       innerArr = [];
       innerArr.length = 0;
       fakeArr = "";
       fakeArr.length = 0;
       zz = 0;
    }
}
// Shuffle/Randomize the numbers in each chunk but not the order of the five chunks
outerArr.forEach(fisherYates);
alert(outerArr);

The problem is when I want to get the values from the array. I don't get the single values (like outerArr[1][3] should show 9). I only get each full chunk (like 6,7,8,9,10). I belive I have to use $.map but I don't know how to use $.map for my example. The shuffle/random function (i.e. outerArr.forEach(fisherYates);) doesn't work either as the code is right now.

The array should also be randomized (as explained in the first link at the top) but I should be able to get the shuffle/random working once I get the dynamic part working.

$.makeArray(fakeArr) isn't doing what you seem to think it is. It expects an object as input, not a string. — nnnnnn
– nnnnnn, Commented May 18, 2013 at 23:38
Thanks. Ok, that explains it. I might have to look at another approach, like the one Michael Geary suggest, with Lo-Dash. — ironarrow
– ironarrow, Commented May 19, 2013 at 6:09

Michael Geary · Accepted Answer · 2013-05-19 04:43:34Z

1

You are really on the wrong track with the idea that you should do this with jQuery. This kind of code is nothing like what jQuery is good at. jQuery is a DOM manipulation library, not a general-purpose JavaScript library for this kind of coding.

If you want a library that is useful for these kinds of array manipulations, a good place to start would be underscore.js or the similar but newer Lo-Dash. These libraries have all kinds of array and object manipulation functions. It would be good to review the documentation for both these libraries and see if they would be helpful. (After reading the docs, if you're not sure which to pick, you wouldn't go wrong with either one, but my suggestion would be Lo-Dash.)

Otherwise, you should simply write bare JavaScript code, with old fashioned loops and such things.

Some notes: I prefer not to use the var outerArr = new Array();. I read somwhere that it should be avoided(?).

What you're using instead is var outerArr = [];. That's fine, and indeed it is the recommended practice these days. But it is only a cosmetic difference. new Array() and [] mean exactly the same thing and work identically. Changing one to the other wouldn't cause any problems or fix any problems.

Also, the indentation in your code was a mess. It was impossible to tell which statements were nested inside what. So I took the liberty of cleaning up the indentation. Please check it and make sure I got it right.

I see there is a fisherYates() function in your code, but this function is never called. Not sure what this is about, perhaps you can clarify.

What is the fake array for? Why do you need a fake array and a real array?

This code has two statements that do nothing:

   innerArr = [];
   innerArr.length = 0;  // does nothing
   fakeArr = "";
   fakeArr.length = 0;  // does nothing

Both innerArr and fakeArr already have a length of zero because their values are [] and "" respectively, so there's no need to set length to zero again.

And one final suggestion: Perhaps instead of trying to write out the JavaScript code immediately, you ought to write out in English - in painstaking detail - exactly what the input is and what the output is and what steps you think will get you there. You're partway there with the description you posted, but there are a lot of details missing. If you can write out all of those details, either in English or in pseudocode, it may help make it easier to write the actual code.

I know this doesn't answer your question, but it should give you food for thought! :-)

answered May 19, 2013 at 4:43

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

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

5 Comments

ironarrow Over a year ago

Thank you for the "DOM manipulation" heads-up. I understand it better now. I will have a look at Lo-Dash. Sorry about the indentation. Thanks for editing, it looks really good now. My original question was how to make a dynamic array, not how to shuffle it, so I updated my post a bit.... (continues in next answer due to character input limit)

ironarrow Over a year ago

...continued... At the moment I'm looking for a suitable domain name. Once i have it, I will post a link to the full example with full explanation in 'painstaking detail - in English'. I fully understand the value of complete explanation when asking questions i forums. You say, you didn't answer my question, but you gave me, as a somewhat novice programmer, valuable information which I appreciate a lot. Thanks!

Michael Geary Over a year ago

Ah, now I follow you on the fake array. I think that example in the jQuery .map documentation is really just to illustrate how you can convert an "array-like object" into an actual Array. For example, when you call $(foo) it returns a jQuery object which is not an actual array but does have a .length property and [0], [1], etc. elements. But you can create a real Array from that with $.makeArray(). In ordinary JavaScript code like you're writing, it would be very rare that you would ever need to do this.

Michael Geary Over a year ago

The idea of writing out the "painstaking detail" is both to help other people understand the problem, but more importantly to help make sure you understand it. Sometimes I understand a problem well enough to just jump right in and write the code, but other times I'm not quite sure of some of the details of the algorithm I need. That's when it's helpful to write out the description in English or in pseudocode, before trying to write the actual code in whatever language I'm coding in.

Michael Geary Over a year ago

And BTW you can use jsfiddle to post the code, so you don't even have to worry about a domain name or hosting.

Community · Accepted Answer · 2017-05-23 12:11:19Z

With help from users Michael Geary and nnnnnn who previously answered my question and after searching around I got the solution. I found a piece of code in this post that helped me.

The code I was looking for looks like this. Also posted on JSFiddle with comments. Please expand JSFiddle javascript window to se long comments.

function fisherYates(myArray) {
    var i = myArray.length, j, tempi, tempj;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        tempi = myArray[i];
        tempj = myArray[j];
        myArray[i] = tempj;
        myArray[j] = tempi;
    }
}

var outerArr = [];
var innerArr = [];
var f = 0;

for (var z = 1; z < 27; ++z) {
    ++f;
    if (f <= 5) {
        innerArr.push(z);
    } else {
        outerArr.push(innerArr);
        innerArr = [];
        f = 0;
        --z;
    }
}

alert(outerArr);
outerArr.forEach(fisherYates);
alert(outerArr);
alert(outerArr[0][0]);
alert(outerArr[4][4]);

Since I don't have reputation 15 I can't +1 Michael Geary's answer

Collectives™ on Stack Overflow

Build dynamic multi-dimensional array

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related