Pushing Values into Array

Question

I have a problem with populating an array based on another array.

It seems when I push a value onto a specific index in the array, it is populating all indexes.

Code

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  public matrix: number[] = [
    1, 2, 3, 4, 5, 6, 7, 8, 9.1, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
    23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
    42, 43, 44, 45,
  ];
  public matrixColumns: number[][] = [];
  public expectedMatrixColumns: number[][] = [
    [1, 10, 19, 28, 37],
    [2, 11, 20, 29, 38],
    [3, 12, 21, 30, 39],
    [4, 13, 22, 31, 40],
    [5, 14, 23, 32, 41],
    [6, 15, 24, 33, 42],
    [7, 16, 25, 34, 43],
    [8, 17, 26, 35, 44],
    [9, 18, 27, 36, 45],
  ];
  public numberofColumns: number = 9;
  columnStartIndex: number = 0;

  constructor() {
    this.createColumnMatrix();
  }

  createColumnMatrix() {
    let columnsMatrix = [];
    let numberRows = this.matrix.length / this.numberofColumns;
    let matrixIndex = 0;

    for (let index = 0; index < this.numberofColumns; index++) {
      this.matrixColumns.push([]);
    }
    let columnIndex: number = 0;
    this.matrix.forEach((number, matrixIndex) => {
      debugger;
      this.matrixColumns[columnIndex].push(this.matrix[matrixIndex]);
      debugger;
      matrixIndex = matrixIndex + 1;
      columnIndex = columnIndex + 1;
      if (columnIndex > this.numberofColumns - 1) {
        columnIndex = 0;
      }
    });
  }
}

Demo Project

Here is a JavaScript version that reproduces the problem:

class AppComponent {
  matrix = [
    1, 2, 3, 4, 5, 6, 7, 8, 9.1, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
    23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
    42, 43, 44, 45,
  ];
  matrixColumns = [];
  expectedMatrixColumns = [
    [1, 10, 19, 28, 37],
    [2, 11, 20, 29, 38],
    [3, 12, 21, 30, 39],
    [4, 13, 22, 31, 40],
    [5, 14, 23, 32, 41],
    [6, 15, 24, 33, 42],
    [7, 16, 25, 34, 43],
    [8, 17, 26, 35, 44],
    [9, 18, 27, 36, 45],
  ];
  numberofColumns = 9;
  columnStartIndex = 0;

  constructor() {
    this.createColumnMatrix();
  }

  createColumnMatrix() {
    let columnsMatrix = [];
    let numberRows = this.matrix.length / this.numberofColumns;
    let matrixIndex = 0;

    for (let index = 0; index < this.numberofColumns; index++) {
      this.matrixColumns.push(columnsMatrix);
    }
    let columnIndex = 0;
    this.matrix.forEach((number, matrixIndex) => {
      this.matrixColumns[columnIndex].push(this.matrix[matrixIndex]);
      matrixIndex = matrixIndex + 1;
      columnIndex = columnIndex + 1;
      if (columnIndex > this.numberofColumns - 1) {
        columnIndex = 0;
      }
    });
  }
}

let component = new AppComponent();
for (let row of component.matrixColumns) {
    console.log(JSON.stringify(row));
}

Problem

If you look at this line in the code:

this.matrixColumns[columnIndex].push(this.matrix[matrixIndex]);

It is pushing the first value in the array (matrix which is 1), into every index in my second array matrixColumns.

Expected output

[1, 10, 19, 28, 37]
[2, 11, 20, 29, 38]
[3, 12, 21, 30, 39]
[4, 13, 22, 31, 40]
[5, 14, 23, 32, 41]
[6, 15, 24, 33, 42]
[7, 16, 25, 34, 43]
[8, 17, 26, 35, 44]
[9, 18, 27, 36, 45]

Actual output

[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]

@trincot I have embedded it, this is the line that seems to be pushing into all indexes of the second array. this.matrixColumns[columnIndex].push(this.matrix[matrixIndex]); when I debug this statement this.matrixColumns is empty before i hit this line, then immediately after the line, every index in the array is populated. Given I am specifically pushing into an specific index, I don't understand why that is happening It is pushing the first value in the array (matrix which is 1), into every index in my second array matrixColumns. — ccocker
– ccocker, Commented Jun 16, 2022 at 11:14
The downside of this stackblitz link is that you are updating the code, and so it no longer represents the problem. — trincot
– trincot, Commented Jun 16, 2022 at 11:27
I removed those links, and replaced them by a runnable Stack Snippet inside the question. Hope it is OK for you. — trincot
– trincot, Commented Jun 16, 2022 at 11:47
No problem much appreciated, I have learned a lot from this exercise, thanks to all who have assisted — ccocker
– ccocker, Commented Jun 18, 2022 at 3:03

R4ncid · Accepted Answer · 2022-06-16 11:27:36Z

3

you can do something like this

const buildMatrix = (data, columns) => data.reduce((res, d, i) => {
  const row = i % columns
  const rowData = [...(res[row] || []), d]
  res[row] = rowData
  return res
}, [])

const data = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
    23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
    42, 43, 44, 45,
  ];
  
const matrix = buildMatrix(data, 9)

console.log(matrix)

answered Jun 16, 2022 at 11:27

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Homer · Accepted Answer · 2022-06-16 11:31:40Z

0

you need two dimensions something like

this.matrixColumns[columnIndex][matrixIndex].push(this.matrix[columnIndex][matrixIndex]);

answered Jun 16, 2022 at 11:31

Mark Homer

1,0451 gold badge7 silver badges16 bronze badges

Comments

trincot · Accepted Answer · 2022-06-16 11:46:58Z

The problem is that you only have one columnsMatrix array. After pushing its reference to this.matrixColumns repeatedly, you end up with multiple references to the same array. So whether you then push to this.matrixColumns[0] or to this.matrixColumns[1] doesn't make a difference, ... you're always pushing to the same array.

You can solve this by pushing a new array unto this.matrixColumns at every call of push.

So replace:

this.matrixColumns.push(columnsMatrix);

with:

this.matrixColumns.push([]);

Simplified code

Not your question, but you can do this as follows:

this.matrixColumns = Array.from({length: this.numberofColumns}, (_, i) =>
    Array.from({length: numberRows}, (_, j) => matrix[i + j*numberRows])
);

let matrix = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
    23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
    42, 43, 44, 45,
];
let numberofColumns = 9;
let numberofRows = Math.ceil(matrix.length / numberofColumns);
// logic
let matrixColumns = Array.from({length: numberofColumns}, (_, i) =>
    Array.from({length: numberofRows}, (_, j) => matrix[i + j*numberofRows])
);
// display
for (const row of matrixColumns) console.log(JSON.stringify(row));

Collectives™ on Stack Overflow

Pushing Values into Array

Code

Demo Project

Problem

Expected output

Actual output

3 Answers 3

Comments

Comments

Simplified code

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

Demo Project

Problem

Expected output

Actual output

3 Answers 3

Comments

Comments

Simplified code

Comments

Your Answer

Sign up or log in

Post as a guest

Related