Mutlidimensional (nested) javascript arrays

JavaScript
1

I am trying to figure out multidimensional javascript arrays.

I have looked at the various tutorials and still feel I am not understanding, so here I am to seek guidance.

currently I have this javascript array and function (posting only relevant portion of code):

var sec = ["10% bonus on your next order! Use " + "KEYCODE: <span class='redBold'>TEN</span>", 
                 "15% bonus on your next order! Use " + "KEYCODE: <span class='redBold'>FIFTEEN</span>", 
		 "Free Shipping bonus on your next order! Use " + "KEYCODE: <span class='redBold'>FREE 
                  SHIPPING</span>",
                 "10% bonus on your next order! Use " + "KEYCODE: <span class='redBold'>TEN</span>", 
		 "25% bonus on your next order! Use " + "KEYCODE: <span class='redBold'>TWENTY-
                   FIVE</span>", 
                 "Free Shipping bonus on your next order! Use " + "KEYCODE: <span class='redBold'>FREE 
                   SHIPPING</span>"];

var offset = 30;

//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;

$(document).ready(function(){
	
	/*WHEEL SPIN FUNCTION*/
	$('#spin').on('click', function handleSpin () {
      if ($('#login').val() === '') {
        return
      }

      $(this).off('click', handleSpin);
      setTimeout(function () {
      	$(".profile-form").submit();
      }, 1000);
      
		//add 1 every click
		clicks ++;
		
		/*multiply the degree by number of clicks
	  generate random number between 1 - 360, 
    then add to the new degree*/
		var newDegree = degree*clicks;
		var extraDegree = Math.floor(Math.random() * 360) + 1;
		totalDegree = newDegree+extraDegree;
		
    var colorIndex = Math.ceil(((totalDegree+30) % 360) / 60) -1;
    var colorPrev = colorIndex == 0 ? 5 : colorIndex - 1;
    var colorNext = colorIndex == 5 ? 0 : colorIndex + 1;
    
    offset = (extraDegree % 60);
    var result = sec[colorIndex];
    
    if(offset == 0) {
      result;
    } else if (offset <= 30) {
      result;
    } else {
      result;
    }
    
    $("#answer").html("Congratulations! You've received a " + result + " at checkout");

when you click the button, the wheel spins and uses the random math method to randomly choose
what section you land on. I have a var called colorIndex that is used to access the elements of the sec array, and a var called result which will output the correct element from the sec array. Everything works as it should, user clicks the button, wheel spins, lands on a random section, and outputs a congratulations message + result through the .html() method.

in an attempt to better understand nested arrays, and have better control, I would like to create an array with two nested arrays.

so my codebase would look like this:

var sec = new Array();
sec[0] = new Array ("10% off", "15% off", "Free Shipping", 10% off", 25% off", "Free Shipping");
sec[1] = new Array ("Ten", "Fifteen", "Free Shipping", "Ten", "Twenty-Five", "Free Shipping");

var offset = 30;

//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;

$(document).ready(function(){
	
	/*WHEEL SPIN FUNCTION*/
	$('#spin').on('click', function handleSpin () {
      if ($('#login').val() === '') {
        return
      }

      $(this).off('click', handleSpin);
      setTimeout(function () {
      	$(".profile-form").submit();
      }, 1000);
      
		//add 1 every click
		clicks ++;
		
		/*multiply the degree by number of clicks
	  generate random number between 1 - 360, 
    then add to the new degree*/
		var newDegree = degree*clicks;
		var extraDegree = Math.floor(Math.random() * 360) + 1;
		totalDegree = newDegree+extraDegree;
		
    var colorIndex = Math.ceil(((totalDegree+30) % 360) / 60) -1;
    var colorPrev = colorIndex == 0 ? 5 : colorIndex - 1;
    var colorNext = colorIndex == 5 ? 0 : colorIndex + 1;
    
    offset = (extraDegree % 60);
    var result1 = sec[0][colorIndex];
    var result2 = sec[1][colorIndex];
    
    if(offset == 0) {
      result;
    } else if (offset <= 30) {
      result;
    } else {
      result;
    }
    
    $("#answer").html("Congratulations! Your deal is " + result1 + " your next order. Use KEYCODE:" + result2 + " at checkout.";

where I get confused is how to write these nested arrays, I’ve seen use of new Array(); but I have read we are not to use this.

so my question : should I use new Array() or the literal array and how would I write that?

Thanks in advance for the guidance, I know there is probably a more concise or logical way to write this, but I am a novice with Javascript trying to learn more advanced concepts.

2

The nested array that you are looking for is most easily expressed as:

var sec = [
    ["10% off", "15% off", "Free Shipping", "10% off", "25% off", "Free Shipping"],
    ["Ten", "Fifteen", "Free Shipping", "Ten", "Twenty-Five", "Free Shipping"]
];

I recommend though that you do not use JavaScript to randomise the wheel, otherwise anyone that knows some JavaScript can control things so that they always get 25% off.

1 Like
3

Thanks Paul for both the help and the suggestion about randomizing the wheel. One more quick question that just dawned on me, If I change my variable result to now be:

var result1 = sec[0][colorIndex];
var result2 = sec[1][colorIndex];

output my .html() mehtod correctly, I will need to change the following if else statement as well:

if(offset == 0) {
result;
} else if (offset <= 30) {
result;
} else {
result;
}

would I use the logical operand && to combine both result1 and result2?

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.