getting "Cannot read property 'thumbnail' of undefined" in angularjs

Question

When i am trying to render name in html file is it showing properly but when i am trying to get category_image.thubmail in html, getting Cannot read property 'thumbnail' of undefined error Details are given below

Json data

[
{
    "id": 22,
    "name": "Test Name",
    "slug": "test-name-english-news",
    "cataegory_image": {
        "thumbnail": "thumb Image",
        "medium": "medium image"
    }
}
]

category model file

    export interface ICategory {
  id: number;
  name: string;
  slug: string;
  category_image: {
    thumbnail: string;
    medium: string;
  };
}

HTML code

  <li *ngFor="let category of categories | async">
    {{category.name}}{{category.category_image.thumbnail}}
    <!-- <a href="#">test<img src="{{category.category_image.thumbnail}}" width="40" alt="{{category.name}}" /></a> -->
  </li>

NTP · Accepted Answer · 2020-05-26 20:01:42Z

1

property name in your JSON is different than what you have on your html.

category.category_image.thumbnail

"cataegory_image": { "thumbnail": "thumb Image", "medium": "medium image" }

there is an extra a after t in your JSON.

answered May 26, 2020 at 20:01

NTP

4,4483 gold badges18 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

getting "Cannot read property 'thumbnail' of undefined" in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related