How do I traverse an array diagonally in javascript [closed]

Question

I have an array with strings that I would like to traverse diagonally.
Assumptions:

• Each string is the same length.
• Arrays could be square or rectangular, horizontally or vertically.

The matrix looks like this:

A B C D E F G H I J K L 

I Would like to get (from top left to bottom right):

A EB IFC JGD KH L 

and (from the bottom left to top right):

I JE KFA LGB HC D 

I already have a piece of code that works 3/4 of the way, but i cant seem to figure out what I am doing (wrong).

//the array var TheArray = ['ABCD','EFGH','IJKL'];  //amount of rows var RowLength = TheArray.length; //amount of colums var ColumnLength = TheArray[0].length; 

The code I have chops up the diagonals into 4 of these loops to get all the diagonals. It looks as 2 for loops with an if to not loop over unbound values. The pseudo code looks a bit like this:

for(loop rows){  var outputarray = [];    for(loop columns){       if(delimit for out of bound){        var temprow = TheArray[something?];        var tempvalue = temprow[something?];        outputarray.push(tempvalue);        }    }  //use values document.getElementById("theDiv").innerHTML += outputarray.join("")+"<br>"; } 

I hope somebody can help me with this.

Answer 1

From top left to bottom right

var array = ["ABCD","EFGH","IJKL"];    var Ylength = array.length;  var Xlength = array[0].length;  var maxLength = Math.max(Xlength, Ylength);  var temp;  for (var k = 0; k <= 2 * (maxLength - 1); ++k) {      temp = [];      for (var y = Ylength - 1; y >= 0; --y) {          var x = k - y;          if (x >= 0 && x < Xlength) {              temp.push(array[y][x]);          }      }      if(temp.length > 0) {          document.body.innerHTML += temp.join('') + '<br>';      }  }

(see also this Fiddle)

---

From the bottom left to top right

var array = ["ABCD","EFGH","IJKL"];    var Ylength = array.length;  var Xlength = array[0].length;  var maxLength = Math.max(Xlength, Ylength);  var temp;  for (var k = 0; k <= 2 * (maxLength - 1); ++k) {      temp = [];      for (var y = Ylength - 1; y >= 0; --y) {          var x = k - (Ylength - y);          if (x >= 0 && x < Xlength) {              temp.push(array[y][x]);          }      }      if(temp.length > 0) {          document.body.innerHTML += temp.join('') + '<br>';      }  }

(see also this Fiddle)

---

Combined

As there's but a single line of difference between both, you can easily combine them in a single function :

var array = ["ABCD","EFGH","IJKL"];    function diagonal(array, bottomToTop) {      var Ylength = array.length;      var Xlength = array[0].length;      var maxLength = Math.max(Xlength, Ylength);      var temp;      var returnArray = [];      for (var k = 0; k <= 2 * (maxLength - 1); ++k) {          temp = [];          for (var y = Ylength - 1; y >= 0; --y) {              var x = k - (bottomToTop ? Ylength - y : y);              if (x >= 0 && x < Xlength) {                  temp.push(array[y][x]);              }          }          if(temp.length > 0) {              returnArray.push(temp.join(''));          }      }      return returnArray;  }    document.body.innerHTML = diagonal(array).join('<br>') +                            '<br><br><br>' +                            diagonal(array, true).join('<br>');

(see also this Fiddle)