javascript pyramid within array

Question

I need my output to look like this:

result expected

The best I could achieve was that:

wrong

Here is my code:

let pyramidComplete = (rows) => {
    let array = [];
    let str = '';
    for (let i = 1; i <= rows; i++) {


        //Add the white space to the left
        for (let k = 1; k <= (rows - i); k++) {
            str += ' ';
        }

        //Add the '*' for each row
        for (let j = 0; j != (2 * i - 1); j++) {
            str += "#".repeat(2 * i - 1);
        }

        //Add the white space to the right
        for (let k = i + 1; k <= rows; k++) {
            str += ' ';
        }

        //Print the pyramid pattern for each row
        array.push(str)
        str = '';
    }
}

pyramidComplete(5);

I thought of assembling a line per loop and then, pushing it into an array but, I can't get the desired result.

Tip: Instead of writing functions like this, just write them like function pyramidComplete(rows) { ... } instead. It makes it a lot more clear what you're doing. The => notation is intended for other situations, like passing that in as an argument. — tadman
– tadman, Commented Jun 16, 2020 at 0:42
Don't recycle str, create a new one through each iteration of the loop. The str = '' part is pointless, just let str = '' at the start inside the row loop. — tadman
– tadman, Commented Jun 16, 2020 at 0:42
🚫📸 Please post code, errors, sample data or textual output here as plain-text, not as images that can be hard to read, can’t be copy-pasted to help test code or use in answers, and are barrier to those who depend on screen readers. You can edit your question to add the code in the body of your question. For easy formatting use the {} button to mark blocks of code, or indent with four spaces for the same effect. The contents of a screenshot can’t be searched, run as code, or copied and edited to create a solution. — tadman
– tadman, Commented Jun 16, 2020 at 0:44
It's very difficult to tell how many spaces are supposed to be in the output array because it's not monospace. — ggorlen
– ggorlen, Commented Jun 16, 2020 at 0:44
The image you supply as the result doesn't have spaces to the right, im not sure you need to have those in the answers — Sean
– Sean, Commented Jun 16, 2020 at 0:46

ggorlen · Accepted Answer · 2020-06-16 02:20:31Z

The logic is fairly direct: for each row, the number of whitespaces is n - i - 1 where i is the row number. The number of # per row is i + 1. You can produce these substrings using String#repeat. Concatenate the two chunks together per line and use the index argument to Array#map's callback to produce each row.

const pyramid = n => Array(n).fill().map((_, i) => 
  " ".repeat(n - i - 1) + "#".repeat(i + 1)
);
console.log(pyramid(5));

If the functions used here are incomprehensible, this can be simplified to use rudimentary language features as follows. It's similar to your approach, but the counts for each character per row are different, I iterate from 0 < n rather than 1 <= n and str should be scoped to the outer loop block.

function pyramid (n) {
  var result = [];
  
  for (var i = 0; i < n; i++) {
    var line = "";
  
    for (var j = 0; j < n - i - 1; j++) {
      line += " ";
    }
    
    for (var j = 0; j < i + 1; j++) {
      line += "#";
    }
    
    result.push(line);
  }
  
  return result;
}

console.log(pyramid(5));

If you need a true pyramid (which your current output seems to be shooting for, contrary to the expected output):

const pyramid = n => Array(n).fill().map((_, i) => {
  const size = i * 2 + 1;
  const pad = n - size / 2;
  return " ".repeat(pad) + "#".repeat(size) + " ".repeat(pad);
});

console.log(pyramid(5));

StackSlave · Accepted Answer · 2020-06-16 01:20:10Z

I think you want to do this:

let doc, htm, bod, nav, M, I, mobile, S, Q, CharPyr; // for use on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
CharPyr = function(char = '#', className = 'pyr'){
  this.char = char; this.className = className;
  this.build = (height = 9)=>{
    const p = M('div');
    p.className = this.className;
    for(let i=0,c=this.char,x=c,d; i<height; i++){
      d = M('div'); d.textContent = x; p.appendChild(d); x += c;
    }
    return p;
  }
}
// magic happens here
const out1 = I('out1'), out2 = I('out2'), out3 = I('out3'), pyr = new CharPyr;
out1.appendChild(pyr.build(5)); out2.appendChild(pyr.build(7)); out3.appendChild(pyr.build());
}); // end load

*{
  box-sizing:border-box;
}
.out{
  margin-bottom:7px;
}
.pyr>div{
  color:#070; text-align:center;
}

<div class='out' id='out1'></div>
<div class='out' id='out2'></div>
<div class='out' id='out3'></div>

Collectives™ on Stack Overflow

javascript pyramid within array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related