Undefined properties in Angular expression binding

Question

I have a binding {{getCategoryName(post.categories[0])['name']}} where I need to process the value post.categories[0] returned in the *ngFor loop with a method getCategoryByName() in my component before finally binding it to the template.The method returns an Object.

I keep getting the error Cannot read property 'name' of undefined . I have tried getting the property using the ['name'] key instead of .name but still get the error.

Any thoughts for a workaround?

  <ion-item text-wrap class="news-item" *ngFor="let post of posts" (click)="viewStory(post)">
          <div >
          <p>{{getCategoryName(post.categories[0])['name']}}</p>
          <h2>{{post.title.rendered}}</h2>
          <p>By Fitz &middot; {{post.date | fromNow}}</p>
        </div>
    </ion-item>

The method

  getCategoryName(categoryId) {
    return this.categories[this.categories.findIndex((el)=>{ return el.id == categoryId})];
  }

Example ember of the Array from which the Object is returned by method above

[
  {
    "id": 33,
    "count": 1,
    "description": "",
    "link": "http://XXXXXXXXXXXXX.co/category/apps/",
    "name": "Apps",
    "slug": "apps",
    "taxonomy": "category",
    "parent": 0,
    "meta": [],
    "_links": {
      "self": [
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/categories/33"
        }
      ],
      "collection": [
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/categories"
        }
      ],
      "about": [
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/taxonomies/category"
        }
      ],
      "wp:post_type": [
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/posts?categories=33"
        },
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/jobs?categories=33"
        }
      ],
      "curies": [
        {
          "name": "wp",
          "href": "https://api.w.org/{rel}",
          "templated": true
        }
      ]
    }
  },

]

show the body of getCategoryName and the structure of posts array — El houcine bougarfaoui
– El houcine bougarfaoui, Commented Nov 15, 2017 at 21:44
@BougarfaouiElhoucine I've edited to show the structure the object (Just one entry for brevity) and the method. — fitzmode
– fitzmode, Commented Nov 15, 2017 at 22:05

Dhana Sekar · Accepted Answer · 2017-11-16 06:10:57Z

4

You could simply do like this

{{getCategoryName(post.categories[0])?.name}}

? is the safe navigation operator. It checks whether the variable is null or undefined so that our template won't try to select a property of something falsy.

More info: https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

answered Nov 16, 2017 at 6:10

Dhana Sekar

6511 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fitzmode Over a year ago

Marked as answer as this seems a more Angular way.

MRsa · Accepted Answer · 2017-11-15 22:05:43Z

1

In your getCategoryName method check if post.categories is undefined, and then return object {name : ''}:

if (post.categories === undefiend) { 
return {name : ''}
}

or you could use in template:

{{(getCategoryName(post.categories[0]) || {name : ''})['name']}}

edited Nov 15, 2017 at 22:05

answered Nov 15, 2017 at 21:43

MRsa

6844 silver badges8 bronze badges

Collectives™ on Stack Overflow

Undefined properties in Angular expression binding

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related