Once the array has been initialized, I am encountering an issue where it appears as undefined within the "then" block of a promise function

Here is a snippet of my code:

Using Typescript:

console.log(this.arr);
myService.getData(). then(data =>{
      console.log(this.arr);
      this.arr[0].myData = data;
 });

When I check the logs in Chrome, here's what I see: 1. arr.length=1 - indicating that the array has been Initialized 2. undefined

Answer №1

It's important to note that 'this' can vary in different scopes.

console.log(this.arr);
myService.getData(). then(data =>{
      console.log(this.arr);
      this.arr[0].myData = data;
 }.bind(this));

Alternatively, you could use:

var self = this;
console.log(self.arr);
myService.getData(). then(data =>{
      console.log(self.arr);
      self.arr[0].myData = data;
 });

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

Utilizing Angular to bind properties conditionally

Can a property be conditionally bound in an Angular template? For instance, if I have an Observable with some data <my-component *ngIf="input$ | async as input" [input1]="input.input1" [overrideValue]="input.ove ...

The type 'Readonly<Ref<Readonly<any>>>' does not have the property 'forEach' available

Having an issue with state management in Vue3 (Pinia) using the Composition API. I successfully retrieved an array called countryCodes and now I want to copy all items from this array into another array called countries defined in the state. However, whe ...

Adding a stylish HTML theme to my Angular 4 application, such as Bootstrap or another option

Looking to incorporate a bootstrap theme 3 or another HTML theme along with their required JavaScript files into my Angular 4 app. Struggling to find clear instructions on how to import the necessary JavaScript files. Is it safe to use Bootstrap 3 or ano ...

Enhance TypeScript in WebStorm: Update or Upgrade the bundled version

What is the best way to update or upgrade the default version? https://i.sstatic.net/hQFUd.png Important note: I prefer not to manually modify and switch to a custom version like: https://i.sstatic.net/wejP7.png ...

How to integrate external JavaScript files with Angular CLI and Webpack

I'm facing a challenge on how to incorporate JS files (vendors) after transitioning Angular Cli from SystemJs to Webpack. For instance Option A I have npm-installed js files. Simply adding script tags to the head tag doesn't work, and it doesn ...

Configuring the React Typescript router to support username-based URLs should be done in a way that does not cause conflicts with other routes

I am looking to display a user's profile on a URL format such as www.domain.com/<userName> and load the component ShowProfile. I want to ensure that terms is not mistaken for a username, so if I visit www.domain.com/terms, I do not want to load ...

Using a specific type of keys, attempting to set two instances of those keys simultaneously will result in an error of that type

Consider this scenario: type Example = { x: string, y: number } const a: Example = { x: "x", y: 1 } const b: Example = { x: "y", y: 2 } const issue = (keys: (keyof Example)[]) => { keys.forEach(key => { a[key] ...

Using iframes in Angular 2/4's index.html

I'm currently working on an angular application and for session management, I've implemented OpenID Connect Session Management. I am attempting to inject iframes into the application. I need to include an iframe in my index.html as follows: < ...

What causes TypeScript to flag spread arguments within callback wrappers?

My aim is to enhance a callback function in TypeScript by wrapping it with additional logic. In order to achieve this, I have an interface called Callbacks that outlines various callback signatures. The objective is to create a wrapper function that can lo ...

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

I'm currently utilizing file-saver within my Angular application to retrieve a PDF generated from the backend. The library functions smoothly on desktop and Android devices, but I'm encountering issues with downloading files on iOS. Contrary to w ...

How does a brand new installation of VSCode believe it comes pre-equipped with TypeScript capabilities?

Operating on Windows 10 Enterprise, After investing several hours and experimenting on various VMs, Interesting Observation #1 Upon opening a .ts file in vscode, it appears to be recognized as TypeScript 2.3.4 as per the screenshot provided below: http ...

Issue: Module "expose?Zone!zone.js" could not be located

Just started experimenting with Angular 2 and encountering an issue when importing zone.js as a global variable: https://i.stack.imgur.com/gUFGn.png List of my packages along with their versions: "dependencies": { "angular2": "2.0.0-beta.3", "es ...

Testing an Angular hybrid application resulted in the error message "Unable to access property 'nativeElement' of null."

I'm encountering a problem with a straightforward test: it ('should be able to navigate to add program', fakeAsync(() => { let href = fixture.debugElement.query(By.css('.add-program-btn')); let link = href.nativeElement.get ...

You cannot access the property 'subscribe' on a void type in Angular 2

fetchNews(newsCategory : any){ this.storage.get("USER_INFO").then(result =>{ this.storage.get("sessionkey").then(tempSessionKey =>{ this.email = JSON.parse(result).email; this.newSessionKey = tempSessionKey; this.authKey =JSON.stringify("Basic ...

Setting up a ts-node project with ECMAScript modules. Issue: Unrecognized file extension ".ts"

I am currently in the process of setting up a minimalistic repository that incorporates ts-node and ESM for a project. Despite the existence of previous inquiries on this topic, I have encountered numerous outdated responses. Even recent answers appear to ...

Is there a way to automatically close the previous accordion when scrolling to a new one on the page?

Currently, I am working with the material-ui accordion component and facing an issue where all accordions are initially opened. As I scroll down the page and reach a new accordion, I want the previous ones to automatically close. The problem arises when tr ...

Encountering a type error while trying to read dummy data, as the map function is not

I am currently working on fetching dummy data from a URL in my component using TS and Next.js. Unfortunately, I encountered an error type that I am unable to diagnose. typings.d.ts: export type Themen = { id: number; title: string; description: string; ...

The server failed to respond to the Angular HTTP request

To store data in my database, I have created a function in my component.ts file that invokes a service: ajoutText(newtext: String) { this.dataService.sendtext(newtext); } On the HTML side, it looks like this: <form class="form"> <mat-form-f ...

Issue TS2322: Type 'Observable<string[]>' is not compatible with type 'Observable<Sensors[]>'

This issue: error TS2322: The type 'Observable' cannot be assigned to the type 'Observable'. The type 'string[]' cannot be assigned to the type 'Sensors[]'. The type 'string' cannot be assigned to th ...

How to initiate focus on Angular 2 MdInputContainer after the view has been

I am encountering an issue with setting focus on the first md-input-container element within a component when the view loads. Despite implementing a @ViewChild property and calling focus on it in the ngAfterViewInit method, the focus does not seem to be wo ...