How to join Array of Arrays in JS without commas

Question

Trying to make a function that outputs a multiplication table given a maximum value.

My issue is that I have an array of arrays I need to join into a string, and no matter what I try, I can't get rid of the darn commas between each inner array item, please help me!

Here's my code:

var multiplicationTable = function(maxValue) {
  var array = [];
  var maxNum = maxValue ** 2;
  y = 1;
  var pad = ("+--" + "-".repeat(maxNum.toString().length - y.toString().length + 1)).repeat(maxValue) + "\+\n";
  for (var i = 0; i <= maxValue * 2; i++) {
    if (i % 2 != 0) {
      array[i] = [];
      for (var j = 0; j < maxValue; j++) {
        var n = ((j + 1) * (i + 1)) / 2;
        if (j + 1 == maxValue) {
          array[i].push("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1) + "|\n");
        } else {
          array[i].push("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1));
        }
      };
    } else {
      array[i] = [pad];
    }
  }
  return array.join(" ");
};

console.log(multiplicationTable(5));
console.log(multiplicationTable(10));

Did any of our solutions help you? Or are there some questions open? — winner_joiner
– winner_joiner, Commented May 29, 2018 at 4:46

patstuart · Accepted Answer · 2018-05-23 20:11:20Z

The problem is that you're concatenating arrays instead of strings. Try converting it to a string and concatenating instead of appending to an array.

var multiplicationTable = function(maxValue) {
  var array = [];
  var maxNum = maxValue**2;
  y = 1;
  var pad = ("+--" + "-".repeat(maxNum.toString().length - y.toString().length + 1)).repeat(maxValue) + "\+\n";
  for (var i = 0; i <= maxValue * 2; i++) {
    if (i%2 != 0) {
      array[i] = "";
      for (var j = 0; j < maxValue; j++) {
        var n = ((j + 1) * (i + 1)) / 2;
        if (j + 1 == maxValue) {
          array[i] += "| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1) + "|\n";
        } else {
          array[i] += "| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1);
        }
      };
    } else {
      array[i] = [pad];
    }
  }
  return array.join(" ");
};

console.log(multiplicationTable(5));
console.log(multiplicationTable(10));

Produces

 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 1   | 2   | 3   | 4   | 5   | 6   | 7   | 8   | 9   | 10  |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 2   | 4   | 6   | 8   | 10  | 12  | 14  | 16  | 18  | 20  |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 3   | 6   | 9   | 12  | 15  | 18  | 21  | 24  | 27  | 30  |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 4   | 8   | 12  | 16  | 20  | 24  | 28  | 32  | 36  | 40  |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 5   | 10  | 15  | 20  | 25  | 30  | 35  | 40  | 45  | 50  |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 6   | 12  | 18  | 24  | 30  | 36  | 42  | 48  | 54  | 60  |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 7   | 14  | 21  | 28  | 35  | 42  | 49  | 56  | 63  | 70  |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 8   | 16  | 24  | 32  | 40  | 48  | 56  | 64  | 72  | 80  |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 9   | 18  | 27  | 36  | 45  | 54  | 63  | 72  | 81  | 90  |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
 | 10  | 20  | 30  | 40  | 50  | 60  | 70  | 80  | 90  | 100 |
 +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+

winner_joiner · Accepted Answer · 2018-05-24 07:24:59Z

I would "join" the inner Array's and then the outer. If you don't want to change to much of your code.

I just changed your return statement, of your function:

 return array.map(i => i.join("")).join("");

The map function iterates through all elements and "converts" the array-Array into a string-Array, through the inline function, that calls the join function on each item.
Finally the string-Array will be joined, with the final join function.

Update:
A join without the Space prevents the distorted output.

var multiplicationTable = function(maxValue) {
  var array = [];
  var maxNum = maxValue**2;
  y = 1;
  var pad = ("+--" + "-".repeat(maxNum.toString().length - y.toString().length + 1)).repeat(maxValue) + "\+\n";
  for (var i = 0; i <= maxValue * 2; i++) {
    if (i%2 != 0) {
      array[i] = [];
      for (var j = 0; j < maxValue; j++) {
        var n = ((j + 1) * (i + 1)) / 2;
        if (j + 1 == maxValue) {
          array[i].push("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1) + "|\n");
        } else {
          array[i].push("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1));
        }
      };
    } else {
      array[i] = [pad];
    }
  }
  return array.map(i => i.join("")).join("");
  
};

console.log(multiplicationTable(5));
console.log(multiplicationTable(10));

Md Johirul Islam · Accepted Answer · 2018-05-23 20:14:48Z

1

Instead of doing array[i].push(..) do array[i] += ... The first approach converts array into an array of arrays. So calling array.join(' ') doesn't work the way you expect.

Working code is following.

var multiplicationTable = function(maxValue) {
  var array = [];
  var maxNum = maxValue**2;
  y = 1;
  var pad = ("+--" + "-".repeat(maxNum.toString().length - y.toString().length + 1)).repeat(maxValue) + "\+\n";
  for (var i = 0; i <= maxValue * 2; i++) {
    if (i%2 != 0) {
      array[i] = [];
      for (var j = 0; j < maxValue; j++) {
        var n = ((j + 1) * (i + 1)) / 2;
        if (j + 1 == maxValue) {
          array[i]+=("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1) + "|\n");
        } else {
          array[i]+=("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1));
        }
      };
    } else {
      array[i] = [pad];
    }
  }
  return array.join('');
};

console.log(multiplicationTable(5));
console.log(multiplicationTable(10));

answered May 23, 2018 at 20:14

Md Johirul Islam

5,1924 gold badges28 silver badges57 bronze badges

1 Comment

user8701049 Over a year ago

Exactly @Md Johirul Islam , so as to avoid the (implicit) second iteration, joining the nested array values

FutoRicky · Accepted Answer · 2018-05-23 20:07:56Z

you can replace the commas with an empty string using .replace(/,/g, '');

Do something like this:

var multiplicationTable = function(maxValue) {
  var array = [];
  var maxNum = maxValue**2;
  y = 1;
  var pad = ("+--" + "-".repeat(maxNum.toString().length - y.toString().length + 1)).repeat(maxValue) + "\+\n";
  for (var i = 0; i <= maxValue * 2; i++) {
    if (i%2 != 0) {
      array[i] = [];
      for (var j = 0; j < maxValue; j++) {
        var n = ((j + 1) * (i + 1)) / 2;
        if (j + 1 == maxValue) {
          array[i].push("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1) + "|\n");
        } else {
          array[i].push("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1));
        }
      };
    } else {
      array[i] = [pad];
    }
  }

  var myTable = array.join(" ");
  return myTable.replace(/,/g, '');
};

console.log(multiplicationTable(5));
console.log(multiplicationTable(10));

user8701049 · Accepted Answer · 2018-05-23 20:21:43Z

Working fiddle https://jsfiddle.net/2097451n/6/

var multiplicationTable = function(maxValue) {
  var array = [];
  var maxNum = maxValue*2;
  y = 1;
  var pad = ("+--" + "-".repeat(maxNum.toString().length - y.toString().length + 1)).repeat(maxValue) + "\+\n";
  for (var i = 0; i <= maxValue * 2; i++) {
    if (i%2 != 0) {
      array[i] = [];
      for (var j = 0; j < maxValue; j++) {
        var n = ((j + 1) * (i + 1)) / 2;
        if (j + 1 == maxValue) {
          array[i].push("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1) + "|\n");
        } else {
          array[i].push("| " + n.toString() + " ".repeat((maxNum).toString().length - n.toString().length + 1));
        }
      };

      // join nested array explicitly.
      //
      array[i] = array[i].join('')
    } else {
      array[i] = [pad];
    }
  }  
  return array.join("");
};

console.log(multiplicationTable(5));
console.log(multiplicationTable(10));

Collectives™ on Stack Overflow

How to join Array of Arrays in JS without commas

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related