Struggling to transfer array data from service to component

Question

Struggling to transfer array data from service to component

I am currently working on passing an array from service.ts to a component. My goal is to display the array elements in a dialog box. However, I encountered a Typescript error

TypeError: Cannot read property 'departmentArr' of undefined

.

I am struggling to comprehend why departmentArr is being identified as undefined.

Within the service:

private todos: Todo[] = [];
private db: any;
public departmentArr: any = [];
    
async searchDepartments(): Promise<Observable<any>> {
  const fetchData3 = await this.db.todos.orderBy('department').keys(function (departments) {
    alert("Departments are: " + departments.join(','));
    this.departmentArr.push(departments.join(','));
  });
  return this.departmentArr;
}

In the Component, I am attempting to retrieve the array from departmentArr.

connection: any;
async showTable() {
    this.connection = (await this.todoService.searchDepartments()).subscribe(message => {
    //the message here signifies the array                     
    console.log(message);
    this.dialog.open(AppComponent, {
      disableClose: true,
      autoFocus: true,
      data: message
    });
  });
}

Where could my mistake lie?

angular typescript angular-material

Answer 1

Answer №1

Understanding the functionality of the this keyword in JavaScript is essential.

When passing a callback function to keys, the assumption that this points to the instance of the enclosing class is incorrect.

In function context under strict mode, this evaluates to undefined.

Potential solutions include:

Utilizing an arrow function. In arrow functions, this retains the value of the enclosing lexical context's this
Using a helper variable outside the callback that can be captured via the callback's lexical context
Modifying this behavior by utilizing the bind method

An illustrative example to demonstrate these concepts:

class MyClass {

public departmentArr: string[] = [];

 runCallback(fun: () => void) {
   fun();
 }

 searchDepartmentsFun() {
  this.runCallback(function() {
    console.log("In function: this: ", this);
  });
 }

 searchDepartmentsArrow() {
  this.runCallback(() => {
    console.log("In arrow function: this: ", this);
  });
 }

 searchDepartmentsCapture() {
  const capturedArr = this.departmentArr; 
  this.runCallback(function() {
    console.log("In fun with capture function: this: ", this, ' captured arr: ', capturedArr);
  });
 }

 searchDepartmentsBind() {
  this.runCallback(function() {
    console.log("In bound fun with capture function: this: ", this);
  }.bind(this));
 }


}

const c = new MyClass();
c.searchDepartmentsFun();
c.searchDepartmentsArrow();
c.searchDepartmentsCapture();
c.searchDepartmentsBind();

Link to Playground

Additionally, it may be beneficial to enable the noImplicitThis option to prevent any conflicts where this could shadow an outer value of 'this'. Since the solution involving bind is affected by this setting, it is less common in TypeScript.

Answer 2

Understanding the functionality of the this keyword in JavaScript is essential.

When passing a callback function to keys, the assumption that this points to the instance of the enclosing class is incorrect.

In function context under strict mode, this evaluates to undefined.

Potential solutions include:

Utilizing an arrow function. In arrow functions, this retains the value of the enclosing lexical context's this
Using a helper variable outside the callback that can be captured via the callback's lexical context
Modifying this behavior by utilizing the bind method

An illustrative example to demonstrate these concepts:

class MyClass {

public departmentArr: string[] = [];

 runCallback(fun: () => void) {
   fun();
 }

 searchDepartmentsFun() {
  this.runCallback(function() {
    console.log("In function: this: ", this);
  });
 }

 searchDepartmentsArrow() {
  this.runCallback(() => {
    console.log("In arrow function: this: ", this);
  });
 }

 searchDepartmentsCapture() {
  const capturedArr = this.departmentArr; 
  this.runCallback(function() {
    console.log("In fun with capture function: this: ", this, ' captured arr: ', capturedArr);
  });
 }

 searchDepartmentsBind() {
  this.runCallback(function() {
    console.log("In bound fun with capture function: this: ", this);
  }.bind(this));
 }


}

const c = new MyClass();
c.searchDepartmentsFun();
c.searchDepartmentsArrow();
c.searchDepartmentsCapture();
c.searchDepartmentsBind();

Link to Playground

Additionally, it may be beneficial to enable the noImplicitThis option to prevent any conflicts where this could shadow an outer value of 'this'. Since the solution involving bind is affected by this setting, it is less common in TypeScript.

Answer 3

Answer №2

I made a modification here by switching the function to an arrow function () =>


private todos: Todo[] = [];
private db: any;
public departmentArr: any = [];
    
async fetchDepartments(): Promise<Observable<any>> {
  const fetchData3 = await this.db.todos.orderBy('department').keys( (departments) => {
    alert("List of Departments: " + departments.join(','));
    this.departmentArr.push(departments.join(','));
  });
  return this.departmentArr;
}

Alternatively, you can create a local variable and assign this.departmentArr to it.

private todos: Todo[] = [];
private db: any;
public departmentArr: any = [];

async fetchDepartments(): Promise<Observable<any>> {
 var tempArr = this.departmentArr;
  const fetchData3 = await this.db.todos.orderBy('department').keys( (departments) => {
    alert("List of Departments: " + departments.join(','));
    tempArr.push(departments.join(','));
  });
  return tempArr;
}

Answer 4

I made a modification here by switching the function to an arrow function () =>


private todos: Todo[] = [];
private db: any;
public departmentArr: any = [];
    
async fetchDepartments(): Promise<Observable<any>> {
  const fetchData3 = await this.db.todos.orderBy('department').keys( (departments) => {
    alert("List of Departments: " + departments.join(','));
    this.departmentArr.push(departments.join(','));
  });
  return this.departmentArr;
}

Alternatively, you can create a local variable and assign this.departmentArr to it.

private todos: Todo[] = [];
private db: any;
public departmentArr: any = [];

async fetchDepartments(): Promise<Observable<any>> {
 var tempArr = this.departmentArr;
  const fetchData3 = await this.db.todos.orderBy('department').keys( (departments) => {
    alert("List of Departments: " + departments.join(','));
    tempArr.push(departments.join(','));
  });
  return tempArr;
}

Struggling to transfer array data from service to component

Answer №1

Answer №2

Similar questions

Exploring the nested component structure in Angular4 (RC5)

"An issue occurred while trying to utilize the output received from the angular service (undefined

Bringing Angular ECharts into a Stackblitz 15.1 setup: A How-To Guide

Empty results in NgRx Parameterized Selector

Resolve routing problems with lazy loading in Angular7

What is the best approach to obtain complete and error methods from the server using BehaviorSubject?

Is there a way to extract the HTMLElement[] type from the DOM?

Organizing a store in a hierarchical structure

There was an issue converting the value {null} to the data type 'System.Int32', resulting in a 400 error

Attempting to retrieve JSON data and present it in a grid layout

Issues arise when attempting to override attributes within the HTML of a parent component in Angular

The null error occurs when rendering with React's state array

Advantages of Using Constructor Parameter Initialization Over the new Keyword in Angular 5

What is the process for extracting the elements of an array fetched from a service in Angular 2?

Steps for converting a tsx file into a js file in React

Improving my solution with PrimeNG in Angular2 - fixing the undefined tag error

Discovering a specific property of an object within an array using Typescript

Checkbox offering a tri-state option

Multiple invocations of the callback function in an Angular5 template binding

What is the best way to include a router-link in a button click event in Angular 8?