Having trouble setting up a 2D array in Angular?

Question

Having trouble setting up a 2D array in Angular?

I am facing issues with initializing the "categorizedProductsPath" array. Both methods that I have tried seem to be failing. Can anyone point out what I am doing wrong?

      // let categorizedProductsPath: number[][] = [];
      let categorizedProductsPath = new Array<number[]>(categorizedProducts.length);
      for (let k = 0; k < categorizedProducts.length; k++) {
        const categorizedProduct = categorizedProducts[k];
        const categoryOfCategorizedProduct = await this.getCategoryToProduct(+categorizedProduct.google_product_category);

        let currentParentId = categoryOfCategorizedProduct.parentId;
        while (currentParentId !== 0) {
          const parentCategory = await this.getCategoryToProduct(currentParentId);
          currentParentId = parentCategory.id;
          categorizedProductsPath[categorizedProduct.id].push(parentCategory.id); //***
        }
      }

The error (TypeError: Cannot read properties of undefined (reading 'push')) occurs at this point ***:

categorizedProductsPath[categorizedProduct.id].push(parentCategory.id);

Thank you

angular typescript

Answer 1

Answer №1

Your goal is to transform categorizedProductsPath into a nested array of number[][]. However, at the moment, it remains an empty array because you did not initialize it properly.

Using const arr = new Array(3) will simply create an array with three undefined elements. If you wish to have an array with three other empty arrays, like [[], [], []], you should follow this approach:

const arr = new Array(3).fill(0).map(() => [])

Answer 2

Your goal is to transform categorizedProductsPath into a nested array of number[][]. However, at the moment, it remains an empty array because you did not initialize it properly.

Using const arr = new Array(3) will simply create an array with three undefined elements. If you wish to have an array with three other empty arrays, like [[], [], []], you should follow this approach:

const arr = new Array(3).fill(0).map(() => [])

Answer 3

Answer №2

You initialized the outer array, however, you neglected to initialize the inner array. In order to do so, execute

categorizedProductsPath[categorizedProduct.id] = []

first before proceeding to push elements into it;

Keep in mind that this approach may result in a sparse array if the categorizedProduct.id values are not consecutive integers starting from zero. While this is acceptable, if the order of categorizedProduct.id is irrelevant, you might want to consider utilizing an object instead of an array.

Answer 4

You initialized the outer array, however, you neglected to initialize the inner array. In order to do so, execute

categorizedProductsPath[categorizedProduct.id] = []

first before proceeding to push elements into it;

Keep in mind that this approach may result in a sparse array if the categorizedProduct.id values are not consecutive integers starting from zero. While this is acceptable, if the order of categorizedProduct.id is irrelevant, you might want to consider utilizing an object instead of an array.

Having trouble setting up a 2D array in Angular?

Answer №1

Answer №2

Similar questions

Test Coverage is unable to capture all test conditions

I'm having trouble with implementing a basic show/hide feature for the login and logout options in the navigation bar using Angular. Can anyone help me figure out why it's

AWS Amplify is failing to maintain the user session post a successful login

How to bind values to @Directive's @Input properties using Angular Reactive Forms

`In TypeScript Angular, encountering challenges with accessing object properties`

Passing an object from @CanActivate() to a component in Angular 2 leads to Typescript Error

Angular - Implementing a debounce feature for event handling

Utilizing Angular Material's matMenu for custom context menus

The parameter type 'router' cannot be replaced with the type 'typeof ...'. The 'param' property is not included in the type 'typeof'

Assigning different data types with matching keys - "Cannot assign type '...' to type 'never'."

What causes a Typescript error when attempting to escape a newline character?

Tips for organizing your CSS from scratch without relying on a pre-existing framework such as bootstrap, bulma, or materialize

Should the checkbox be marked, set to 1?

Typescript: searching for a specific type within an array of objects

The cdkDropList in Angular's drag and drop feature does not support the application of element styles

Create dynamic modals in ReactJS that appear when a row is clicked

Tips for postponing input validation in Angular 2+

What is the best way to divide text into key-value pairs using JavaScript?

The Angular application is not displaying correctly on mobile devices due to a lack

What could be the reason behind my Vue file triggering a TS6504 error and suggesting to "allowJs"?