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'
      }
    ]

Do you get any languages from your `languageService`. Seems like `this.languages` does not contain any elements — derpirscher, Jan 27 '21 at 09:10
I achived something by this code: TS[ // this.languageService.getAllLanguages() // .subscribe(languages => { // this.languages = languages as Language[] // this.languages.forEach(function (value) { // this.languageTableElements.push(this.languageTableElements1) // }); // }); ], and in HTML [ //
{{language.name}}
but i need to do it in typescript to convert from Language model to my reusable List model — Obyi, Jan 27 '21 at 09:14
what's the purpose of the map in your code? It doesn't seem to have any effect. Also, what rxjs version are you using? Finally, have you tried the async pipe in your template? — Joakim, Jan 27 '21 at 09:15
_"Im tired of it"_ - stop your attempts and read [this answer](https://stackoverflow.com/a/14220323/6513921) in it's entirety. Your variable `this.languages` is assigned asynchronously and it might not be initialized by the time you're attempting `this.languages[0].Name`. The solution is to access the variable **only** inside the subscription. You need to understand how async data works. — ruth, Jan 27 '21 at 09:19
If you are getting data from a subject, then I suspect you need to test for null initially. Subjects fir multiple times and the initial value may be null. Try wrapping languages in a if condition. If you are consuming the data on a view, use the ? operator to ignore nulls — Darren Street, Jan 27 '21 at 09:50
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, Jan 27 '21 at 10:28

score 0 · Answer 1 · answered Jan 27 '21 at 10:12

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'
    }
  ]
})

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

1 Answers1