We Keep Coding

Adding asterisks to array?

I'm trying to add elements as asterisks inside array based on number of elements. Basically If numberOfRows is 3 then I want this output:
[
' * ',
' *** ',
'*****'
]
I'm struggling on setting asterisks using the index. Can anyone point me in the right direction? Thanks a lot!
Here's my code:
function myFunction(numberOfRows) {
var arr = [];
var value = "";
var asterisk = "*"; // Need to update this based on number of rows
for (var i = 1; i <= numberOfRows; i++) {
value += asterisk;
arr.push(value);
}
return arr;
}

Got it working! Here's a perfect solution.
function myFunction(n) {
let arr = [];
for(let f = 1; f <= n; f++) {
arr.push(' '.repeat(n - f) + '*'.repeat(f + f - 1) + ' '.repeat(n - f));
}
return arr;
}
console.log(myFunction(3));

Try something like this;
function myFunction(numberOfRows) {
var arr = [];
var value = "";
var slots = numberOfRows * 2 - 1;
var spaceSlots, asteriskSlots, spaces;
for (var i = 0; i < numberOfRows; i++) {
asteriskSlots = i * 2 + 1;
spaceSlots = Math.floor((slots - asteriskSlots)/2);
spaces = new Array(spaceSlots).fill(' ').join('');
value = spaces + '*'.repeat(asteriskSlots) + spaces;
arr.push(value);
}
return arr;
}
console.log(myFunction(20));

Using counter in variable name

This is what I have currently but I cant get v(i) to behave the same as v1. What am I doing wrong?
I've also tried the piece below which also did not work.
var x = "v" + i;
alert(x);
My main problem is the following:
var v1 = document.getElementById("thing1").innerHTML; // = 100
var v2 = document.getElementById("thing2").innerHTML; // = 150
var v3 = document.getElementById("thing3").innerHTML; // = 200
for (i = 0; i < 4; i++) {
if ( v(i) != ""){
alert(v(i));
}
}
Thanks in advance:)

What you are trying to do is not easily accomplished. You would have to assign the variable to the window object and then print it from there.
A much better solution is to use your own object or array to handle this:
var v1 = document.getElementById("thing1").innerHTML; // = 100
var v2 = document.getElementById("thing2").innerHTML; // = 150
var v3 = document.getElementById("thing3").innerHTML; // = 200
var array = [v1,v2,v3];
for (i = 0; i < 4; i++) {
if ( array[i] != ""){
alert(array[i]);
}
}

All global variables are properties of window object you could use window['v'+ i] or this['v'+ i] to create them.
But this is very bad pattern consider using object instead.

What you are trying to do is get an interpolated variable name, which is not possible in javascript the way you do it.
You can do this using this['v'+i] or window['v'+i] which are both bad ideas in the global scope.
v(i) actually means: run function v(...) with parameter i
If i would write your example code in easy to understand javascript, i would come up with this:
for(var i = 1; i <= 4; i++)
{
var html = document.getElementById('thing'+i).innerHTML;
alert(html);
}
If you want your values in an array, in a way that you don't write the same code 6 times:
var ids = ['thing1','thing2','thing3','thing4'];
// es5
var values = [];
for(var i = 0; i < ids.length; i++)
{
var html = document.getElementById( ids[i] ).innerHTML;
values.push( html );
}
// values now contains all the values of the elements
// OR es 6
var values = ids.map(function(id) { return document.getElementById(id).innerHTML; });
// or
var values = ids.map(id => document.getElementById(id).innerHTML);

You could use an array without using single variables and loop it.
var array = [
'100', // document.getElementById("thing1").innerHTML,
'150', // document.getElementById("thing2").innerHTML,
'200' // document.getElementById("thing3").innerHTML
],
i;
for (i = 0; i < array.length; i++) {
if (array[i] !== "") {
console.log(array[i]);
}
}
If you need some keys, you could use an object.
var object = {
v1: '150', // document.getElementById("thing1").innerHTML,
v2: '200', // document.getElementById("thing2").innerHTML,
v3: '250', // document.getElementById("thing3").innerHTML
},
i;
for (i = 1; i <= 3; i++) {
if (object['v' + i] !== "") {
console.log(object['v' + i]);
}
}

undefined in Closures In For Loops

var createShoutOuts = function(numbers_list){
var shoutOuts = [];
for (var j = 0; j < numbers_list.length; j++) {
shoutOuts.push(function() {
var shout_out = 'This is shout out number ' + (j+1);
console.log(shout_out + '. The number is ' + numbers_list[j]);
});
}
return shoutOuts;
};
var performShoutOuts = function(user_numbers){
var readyForShout = createShoutOuts(user_numbers);
for (var i = 0; i < readyForShout.length; i++) {
readyForShout[i]();
};
};
performShoutOuts([2,4,8]);
I created the above to teach myself closures. The output is always:
'This is shout out number 4. The number is undefined'
I understand that it will always say number 4 because the anonymous functions that are being pushed in to the shoutOuts array have a reference to the j variable, not a copy of the value of the j variable. Therefore by the time the anonymous functions are called by readyForShout[i](); the for loop has already run and i has the value 4.
What I don't understand is why is it saying undefined? Because it appears to me as though the array that is passed in to performShoutOuts should be stored in the closure and should therefore be accessible when readyForShout[i](); is executed.
What have I missed?

Try using a closure for real:
var createShoutOuts = function(numbers_list){
var shoutOuts = [];
for (var j = 0; j < numbers_list.length; j++) {
shoutOuts.push((function (j) {
return function () {
var shout_out = 'This is shout out number ' + (j+1);
console.log(shout_out + '. The number is ' + numbers_list[j]);
};
})(j));
}
return shoutOuts;
};
var performShoutOuts = function(user_numbers){
var readyForShout = createShoutOuts(user_numbers);
for (var i = 0; i < readyForShout.length; i++) {
readyForShout[i]();
};
};
performShoutOuts([2,4,8]);

Javascript count unique array occurrence

Following were an output from an array returned by following function:
$scope.variantOptions = $scope.variantLists.join(", ");
medium,small,medium,small,small
How can I sort the result, so it represent the output as:
medium x 2,small x 3
EDIT
addCount function:
$scope.addCount = function($index){
$scope.counter = 1;
if($scope.activity['variant'][$index]['count'] != undefined ){
$scope.counter = parseInt($scope.activity['variant'][$index]["count"]) +1;
$scope.variantLists.push($scope.activity['variant'][$index]['variant_dtl_name']);
}
$scope.activity['variant'][$index]["count"] = $scope.counter;
console.log(arraySimplify($scope.variantLists));
};
Thanks!

pass your '$scope.variantLists' arry into this function it will give you the expected result.
function arraySimplify(arr){
arr.sort();
var rslt = [], element =arr[0] ,count = 0 ;
if(arr.length === 0) return; //exit for empty array
for(var i = 0; i < arr.length; i++){
//count the occurences
if(element !== arr[i]){
rslt.push(element + ' x ' + count);
count =1;
element = arr[i];
}
else{
count++;
}
}
rslt.push(element + ' x ' + count);
return rslt.join(', ');
}

Your code is working:
for (var i = 0;i < $scope.variantLists.length;i++) {
obj[arr[i]] = (obj[arr[i]] || 0) + 1;
}
Gives you an object:
obj = {medium: 2, small: 3}
To see it without having to go into the console, you can just alert the object after the 'for' loop:
alert(obj);
To get the EXACT string you want:
var string = "";
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var count = validation_messages[key];
string += key + " x " + count;
}
}

Although it may look like an entry in Code Golf but this is one of the rare times when Array.reduce makes sense.
var r = a.sort().reduce(
function(A,i){
A.set(i, (!A.get(i))?1:A.get(i)+1);
return A;
},new Map());
Which makes basically what Jon Stevens proposed but in a more modern and highly illegible way. I used a Map because the order in a normal Object dictionary is not guaranteed in a forEach loop. Here r.forEach(function(v,k,m){console.log(k + ":" + v);}) gets printed in the order of insertion.

How can I dynamically create a multi-dimensional array with negative indexes?

In Javascript, I have a matrix with a variable number of rows and columns, which I wish to store in a multi-dimensional array.
The problem is that I need extra 3 columns and 3 extra rows with negative indexes in the matrix too. So the result for a 10x10 matrix should be a 13x13 array with indexes from -3 to 9.
I define the array with:
var numberofcolumns = 10;
var numberofrows = 10;
var matrix = [];
for (var x = -3; x < numberofcolumns; x++) {
matrix[x] = [];
}
Is this the right way to do this? Or is there a better way?

While you can create attributes that are negative numbers, you lose some of Javascript's pseudo-array magic. In particular, matrix.length will still be 10 even though it has 13 elements. And the code in general may be surprising to anyone reading it.
You might be better off defining an offset to get the value you need out of the array index and vice-versa:
var offset = 3
for (var x=-3; x<numberofcolumns; x++) {
matrix[x+offset] = []
}

You could define the matrix as an object instead. You would lose some array functionality but you could still access matrix[-3] for example.
var numberofcolumns = 10;
var numberofrows = 10;
var matrix = {};
for (var x = -3; x < numberofcolumns; x++) {
matrix[x] = [];
}
for (x in matrix) {
console.log(matrix[x]);
}
Or you could define your own class starting as an object or array and work from there. Here's something to get you started:
function Matrix() { };
Matrix.prototype.LBound = function()
{
var n;
for (i in this) {
if (!isNaN(i) && (isNaN(n) || n > i))
n = parseInt(i);
}
return n;
};
Matrix.prototype.UBound = function()
{
var n;
for (i in this) {
if (!isNaN(i) && (isNaN(n) || n < i))
n = parseInt(i);
}
return n;
};
Matrix.prototype.length = function()
{
var length = this.UBound() - this.LBound();
return isNaN(length) ? 0 : length+1;
};
Matrix.prototype.forEach = function(callback, indexes)
{
if (!indexes) var indexes = [];
for (var i = this.LBound(); i <= this.UBound() ; i++)
{
indexes[Math.max(indexes.length-1, 0)] = i;
callback(this[i], indexes);
if (this[i] instanceof Matrix)
{
var subIndexes = indexes.slice();
subIndexes.push("");
this[i].forEach(callback, subIndexes);
}
}
};
Matrix.prototype.val = function(newVal)
{
if (newVal)
{
this.value = newVal;
return this;
}
else
{
return this.value;
}
};
Then you'd create your matrix as such
var numberofcolumns = 10;
var numberofrows = 10;
var matrix = new Matrix();
for (var i = -3; i < numberofcolumns; i++) {
matrix[i] = new Matrix();
for (var j = -4; j < numberofrows; j++) {
matrix[i][j] = new Matrix();
matrix[i][j].val("test " + i + " " + j);
}
}
And you can run some cool functions on it
console.log("Upper bound: " + matrix.LBound());
console.log("Lower bound: " + matrix.UBound());
console.log("Length: " + matrix.length());
matrix.forEach(function(item, index)
{
if (item.val())
console.log("Item " + index + " has the value \"" + item.val() + "\"");
else
console.log("Item " + index + " contains " + item.length() + " items");
});
DEMO: http://jsfiddle.net/uTVUP/

I agree with Mark Reed's points about this being a unintuitive use of Array. I think a subclass is in order. You could follow the tutorial here to subclass Array, keep the native bracket notation, and override methods like length() so they give sensible values. Subclassing would have the added advantage of making it clear to those reading your code that something besides your everyday array is going on.