Generating a 2D array in Typescript, leaving it empty initially, and then adding values at various locations

I am attempting to create an empty 2D array but encountering an issue where I receive an error stating "cannot set property of undefined". My approach involves dynamically determining the size of the array and populating it with different DOM objects at specific locations within the array. Could this be due to a mistake in how I initialized the array?

let gridArrayNumbers = [];
      section.Layout.forEach(layout => {
        gridArrayNumbers.push(layout);//eventually, this array will contain {2,3}
      });
      let gridArray: any [][] = [];

...

let e = document.createElement("label");
            e.textContent = element.content;             
            gridArray[element.layout.row][element.layout.column] = e;//this is where the error occurs with 'undefined'

Answer №1

When you are attempting

gridArray[element.layout.row][element.layout.column] = e

This code will not function properly if the array is empty. To solve this issue, you must first set initial values:

gridArray[element.layout.row] = []
gridArray[element.layout.row][element.layout.column] = e

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exporting a React parent function to a child component

I have a React project where the rendering works fine, but I am facing an issue with calling a function declared in the parent component. Parent import React, { useState, useMemo, useRef, useCallback, useEffect } from "react"; import { AgGridRe ...

Guide to accessing a string from a file with PHP

So I've got this text file called mytxt.txt The content inside is formatted like this: name (username) name (username) I'm attempting to extract these lines and insert them into HTML <li> elements, but I'm struggling with how to do ...

"Looking to modify a style within an iframe with React? Here's how you can do it

I want to include an iframe in my react component, but I need to hide a specific element within it. The iframe source comes from an external domain. Is there a way to add custom CSS to the iframe so that I can achieve this? Below is the code for my compo ...

Struggling to access values from your model using EL in JavaScript? Let me provide some guidance

In my model, there is an object named "domain" with two methods: getDescriptionEn() and getDescriptionFr(). I am trying to retrieve the appropriate description based on the current locale. My issue lies in the following code snippet: var locale = "${cur ...

Retrieve data from a web api at regular intervals using Angular observables and subscription

My Launch method is designed to start an engine by taking parameters and returning the instance name once started. After that, I need to periodically query another service every 2 seconds to check if the status has changed to either "Succeeded" or "Faile ...

Exploring ways to implement recursion in an asynchronous loop: Fetching data from a push array

In order to run a geocode multiple times against an array, I have chosen to utilize recursion to loop through an asynchronous function. var geocoder = require('geocoder') var geocoded = [] //Sample array var result = [{ 'company_no' ...

Pass data to JavaScript using Node.js Express server

I recently started learning nodejs and have encountered a challenge in sending a variable from my nodejs express server to a javascript file. The code I currently have is: res.send(String(playerLives)); The variable playerLives is an integer, and I faced ...

Is it possible to access global variables within a composable function?

I am currently in the process of transitioning a project from Vue 2 options API to Vue 3 composition API. Within an options API component, there is a variable named componentData. I am calling a mixin from this component, which allows me to access all the ...

Is it possible to employ JavaScript for performing a Ctrl-F5 refresh?

I'm working with a small asp file that runs in a frame. Is there a way to trigger a CTRL+F5 type of refresh to reload the entire browser window? I've attempted using parent.location.reload(true), location.reload(), and various other methods, but ...

The simultaneous use of trackball controls and GUI is not compatible

When I click on them, the GUI changes together and I have looked at other answers. However, I am not sure where to put the listener. I tried putting the listener in render(), but it still doesn't work. How can I fix my code? This coding is related to ...

Collection of clickable images that lead to creatively designed individual pages

Being relatively new to JavaScript and jQuery, my knowledge is solid when it comes to HTML & CSS. Currently, I have a page with 20 minimized pictures (with plans to increase to 500+ images) that open into a new page when clicked. Although I have no issues ...

Can you provide guidance on utilizing OneNote JavaScript APIs to interpret indented paragraphs within OneNote?

I keep a notebook that contains the following entries: https://i.stack.imgur.com/MLdO0.png For information on OneNote APIs, you can refer to this link (paragraph class selected already) https://learn.microsoft.com/en-us/javascript/api/onenote/onenote.p ...

Cease the toggling of series visibility and instead gray out the legend when clicked

I have been working on customizing a Stacked Column Chart in Highcharts. One of the requirements is that when a legend is clicked, it should grey out as usual, but the corresponding series/stack should remain visible and retain its original color. I attem ...

Unable to consolidate subdocument's collection

Having the following documents: I am facing a challenge where I need to aggregate the latest rating from the last array element and then calculate the average of (3,1,3,1). Currently, I am struggling with double unwind and unable to obtain the desired res ...

Implementing the ternary operator on a nested object field in typescript to enforce type validation

Is there an issue with my code or is this intentional? I want to write something similar to this. type MyDefinition = { salutation: string; value?: { typeOfValue: string; val?: string }; }; function create(name: string, input?: Partial<MyDefin ...

Change the background color of a MUI ToggleButton based on a dynamic selection

const StyledToggleButton = styled(MuiToggleButton)(({ selectedColor }) => ({ "&.Mui-selected, &.Mui-selected:hover": { backgroundColor: selectedColor, } })); const FilterTeam = (props) => { const [view, setView] = ...

What is the best way to include dynamic query parameters in the src attribute of a <script> tag?

As I develop a basic asp.net application, I encountered a situation where I needed to include a script with a dynamic query parameter in my aspx page. For instance: <script src="../javascript/script.js?v=#var#" type="text/javascript"></script> ...

How to disable or enable a submit button in jQuery 1.8

Recently, I upgraded from jquery version 1.5.2 to 1.9 and encountered an issue with my disabled buttons not functioning properly. The buttons should become enabled after the form fields are filled out, allowing the user to either remove or save the infor ...

Utilizing CSS in Angular applications

I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...

What is the mechanism for storing local variables and arrays in the stack?

[https://i.sstatic.net/kfU6n.png][1] #include<stdio.h> int main() { int x = 23; int y = 24; int z = 25; int asar= 26; int a[5]; int p = 15; int q = 16; int r = 17; a[11]=56; a[10]=57; a[9]=58; a[8]= ...