What is the reason for the undefined value of "this.memberSkills"?

Question

What is the reason for the undefined value of "this.memberSkills"?

Encountering an issue when calling the groupSkillsByExpertise() function in ngOninit as the console.log displays this.memberSkills as undefined. However, the content of membersSkills can be displayed in the HTML template. The aim is to filter the array of memberSkills in the groupSkillsByExpertise() function to only show skills with expert level. Since memberSkills is undefined, the filter cannot be applied.

Below is the code from my member-profile-component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MemberContact } from 'src/app/models/member-contact/member-contact.interface';
import { MemberProfileService } from 'src/app/services/member-profile/member-profile.service';
import { Skill } from 'src/app/models/skill/skill.interface';
import { Language } from 'src/app/models/language/language.model';

@Component({
  selector: 'app-member-profile',
  templateUrl: './member-profile.component.html',
  styleUrls: ['./member-profile.component.css']
})
export class MemberProfileComponent implements OnInit {

  memberId: number;
  member: MemberContact;
  memberSkills: Array<Skill>;
  memberLanguages: Array<Language>;
  expertList: Array<Skill>;
  intermediateList: Array<Skill>;
  beginnerList: Array<Skill>;

  constructor(
    private activatedRoute: ActivatedRoute,
    private memberProfileService: MemberProfileService
  ) { }

  ngOnInit(): void {
      this.getMemberProfile();
      this.getMemberSkills();
      this.getMemberLanguages();
      this.groupSkillsByExpertise();
  }

  getMemberProfile() {
    this.memberId = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.memberProfileService.findMemberById(this.memberId)
    .subscribe(member => this.member = member);
  }

  getMemberSkills() {
    this.memberId = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.memberProfileService.findSkillsByMemberId(this.memberId)
    .subscribe(skills => this.memberSkills = skills);
  }

  getMemberLanguages() {
    this.memberId = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.memberProfileService.findLanguageByMemberId(this.memberId)
    .subscribe(languages => this.memberLanguages = languages);
  }

  groupSkillsByExpertise() {
    console.log(this.memberSkills); // Why is this undefined?
    /* this.expertList = this.memberSkills.filter(skill => skill.skillLevel?.skillLevel === "Expert"); */  
  } 
}

angular typescript

Answer 1

Answer №1

Since you have a subscription setting your memberSkills in getMemberSkills, it is important to wait for that subscription to set the data before utilizing it.

The template will display the data as the change detection mechanism updates it when the necessary data is fetched.

To ensure the correct order of functions execution, you can either make the group of functions async or alternatively, include the grouping function within the subscription block like this:

  ngOnInit(): void {
      this.getMemberProfile();
      this.getMemberSkills();
      this.getMemberLanguages();
  }

  getMemberSkills() {
    this.memberId = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.memberProfileService.findSkillsByMemberId(this.memberId)
    .subscribe(skills => {
            this.memberSkills = skills;
            this.groupSkillsByExpertise();
        });
  }

Answer 2

Since you have a subscription setting your memberSkills in getMemberSkills, it is important to wait for that subscription to set the data before utilizing it.

The template will display the data as the change detection mechanism updates it when the necessary data is fetched.

To ensure the correct order of functions execution, you can either make the group of functions async or alternatively, include the grouping function within the subscription block like this:

  ngOnInit(): void {
      this.getMemberProfile();
      this.getMemberSkills();
      this.getMemberLanguages();
  }

  getMemberSkills() {
    this.memberId = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    this.memberProfileService.findSkillsByMemberId(this.memberId)
    .subscribe(skills => {
            this.memberSkills = skills;
            this.groupSkillsByExpertise();
        });
  }

Answer 3

Answer №2

memberSkills will remain undefined until it is assigned a value in the subscribe function of findSkillsByMemberId. This assignment happens asynchronously, so the timing of when it receives its values is unknown.

To avoid dealing with an empty array, you can initialize memberSkills when declaring it like this:

public memberSkills = new Array<Skill>();

By initializing it with an empty array, you can perform filters on it without encountering any issues.

Additionally, you can add the filter directly to the result of the subscribe function to immediately filter the array once it is received.

Answer 4

memberSkills will remain undefined until it is assigned a value in the subscribe function of findSkillsByMemberId. This assignment happens asynchronously, so the timing of when it receives its values is unknown.

To avoid dealing with an empty array, you can initialize memberSkills when declaring it like this:

public memberSkills = new Array<Skill>();

By initializing it with an empty array, you can perform filters on it without encountering any issues.

Additionally, you can add the filter directly to the result of the subscribe function to immediately filter the array once it is received.

Answer 5

Answer №3

If you want to streamline your code and utilize async/await, the following solution may be helpful:

 convertObservableToPromise = async () => {
    this.id = Number(this.route.snapshot.paramMap.get('id'));
    return this.skillProfileService.findSkillsByID(this.id).toPromise();
  }

  organizeSkillsByCategory = async () => {
    this.skills = await this.convertObservableToPromise();
    console.log(this.skills);
  }

Answer 6

If you want to streamline your code and utilize async/await, the following solution may be helpful:

 convertObservableToPromise = async () => {
    this.id = Number(this.route.snapshot.paramMap.get('id'));
    return this.skillProfileService.findSkillsByID(this.id).toPromise();
  }

  organizeSkillsByCategory = async () => {
    this.skills = await this.convertObservableToPromise();
    console.log(this.skills);
  }

What is the reason for the undefined value of "this.memberSkills"?

Answer №1

Answer №2

Answer №3

Similar questions

Before the service call finishes, Akita queries this.selectAll and returns an empty list

When attempting to compile the building project following the upgrade to Angular 9, an error message is displayed stating "Unable to access property 'length' as it is undefined

There was a Runtime Error that occurred, stating a TypeError: It is not possible to access properties of an undefined value (specifically

What is the proper way to retrieve a constant variable within a return statement?

How can I dispatch multiple actions simultaneously within a single epic using redux-observable?

Combining and linking 3 RxJS Observables in TypeScript and Angular 4 without nesting to achieve dependencies in the result

TypeScript focuses on checking the type of variables rather than their instance

Can you explain the purpose of the .json() function in Angular2?

When receiving JSON and attempting to store the data in a variable, I encounter an issue where it returns the error message "undefined is not iterable (cannot read property Symbol

Guide to properly defining the interface for JSON data in Angular6

Sometimes the PDF does not display even though the iframe src attribute is updating in Angular 6

Angular reactive forms are experiencing a setback where the value of '[value]' is not being properly set for controls

Where is the best place to obtain the clientSecret key for mounting Stripe elements?

Executing asynchronous functions in Angular 2

Angular 2 Return {responseBody: "assigned variable with [object Object]"}

Utilize Angular to Transfer HTTP Array Data from a Service to a Component

The issue with Angular's two-way data binding in a string array is that it is not functioning properly

Troubleshooting issue: How to effectively extract route params in Angular using switchMap

Typescript error: The argument containing 'username' and 'password' fields cannot be assigned to a parameter expecting only a 'string' type

If "return object[value1][value2] || default" does not work, it means that value1 is not a recognized property