typescript - Error in angular: Cannot read property 'Name' of undefined

Question

Last time when i tried to do subscriptions and mapping in angular was 2 years ago. Im tired of it, i trying for week or more to map that values and the closest attempt getting me error: Cannot read property 'Name' of undefined.

This is my code:

this.languageService.getAllLanguages().subscribe(languages =>{
      this.languages = languages.map((language)=>{
        return {
          Id:language.Id, 
          Name: language.Name,
          Code: language.Code,
          Charset: language.Charset,
          Default: language.Default,
          Active: language.Active,
          SystemId: language.SystemId
        }
      })
    })



    this.languageTableElements = [
      {
        type: 'checkbox'
      },
      {
        type: 'icon',
        label: this.languages[0].Name,
        icon: 'assets/icons/flag_pl.png'
      }
    ]

question from:https://stackoverflow.com/questions/65915920/error-in-angular-cannot-read-property-name-of-undefined

Answer 1

Need to use languages in the subscription callback (when it has a value!)

this.languageService.getAllLanguages().subscribe(languages =>{
  this.languages = languages.map((language)=>{
    return {
      Id:language.Id, 
      Name: language.Name,
      Code: language.Code,
      Charset: language.Charset,
      Default: language.Default,
      Active: language.Active,
      SystemId: language.SystemId
    }
  })

  this.languageTableElements = [
    {
      type: 'checkbox'
    },
    {
      type: 'icon',
      label: this.languages[0].Name,
      icon: 'assets/icons/flag_pl.png'
    }
  ]
})