Assign array of JSON objects to array of interface Angular/Typescript

Question

Currently, this works and doesn't give my error while running but my text editor is giving me an error that says property 'categories' does not exist on type 'CategoryInterface[]' (on the line where response.categories is assigned to variable) so I'm not sure if I'm doing things right.

    public categories: CategoryInterface[];

          .subscribe((response: CategoryInterface[]) => {
          this.categories = response.categories;
          console.log(this.categories);
      });

My backend returns this:

{
"categories": [
    {
        "categoryId": 1,
        "name": "Important",
        "description": "This category is important.",
        "order": 1,
        "createdBy": null,
        "createdAt": "2017-11-25 12:09:04",
        "updatedBy": null,
        "updatedAt": "2018-01-17 23:53:25",
        "categoryBoards": [
            {
                "categoryBoardId": 1,
                "categoryId": 1,
                "name": "Announcements",
                "description": null,
                "order": 2,
                "createdBy": null,
                "createdAt": "2017-11-25 12:09:49",
                "updatedBy": null,
                "updatedAt": "2018-01-18 00:09:02"
            },
            {
                "categoryBoardId": 23,
                "categoryId": 1,
                "name": "Rules",
                "description": null,
                "order": 1,
                "createdBy": null,
                "createdAt": "2018-01-18 00:08:57",
                "updatedBy": null,
                "updatedAt": "2018-01-19 00:05:51"
            }
        ]
    }
]

}

Mehdi Benmoha · Accepted Answer · 2018-02-06 16:10:49Z

1

You are trying to cast your api response to an array of CategoryInterface which is not the case, you better use your subscribe method like this:

.subscribe((response: any) => {
    this.categories = <CategoryInterface[]> response.categories;
    console.log(this.categories);
});

It's the your api response categories which needs to be casted to CategoryInterface[]

Bonus: The angular style-guide notice that you need to declare classes instead of interfaces and you don't have to suffix the class name with Interface, so just name your CategoryInterface to Category.

answered Feb 6, 2018 at 16:10

Mehdi Benmoha

3,9853 gold badges25 silver badges54 bronze badges

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

2 Comments

Jonathan Lightbringer Over a year ago

I actually wanted to avoid using any as much as possible.. Is there a way to avoid using any or is this the best way?

Mehdi Benmoha Over a year ago

The angular HttpClient get method is returning an Observable of any, but you can make a workarround with mapping it like this, for example: this.httpClient.get('yourApiUrl').map(resp => <Category[]> resp.categories || []); and your service method would return an Observable<Category[]>

twinklehawk · Accepted Answer · 2018-02-06 16:10:13Z

0

You get the error because you declare response as a CategoryInterface[], but response.categories is actually the CategoryInterface[]. response is just a wrapper around the array. All the types are stripped out when the typescript is converted to javascript, which is why it works fine at runtime.

answered Feb 6, 2018 at 16:10

twinklehawk

6396 silver badges13 bronze badges

1 Comment

Jonathan Lightbringer Over a year ago

If I remove the .categories in response.categories, I now have to do this on my html *ngFor="let category of categories.categories" which I'm trying to avoid because it looks ugly lol. But yeah, the error is gone. Is there a work around this?

Collectives™ on Stack Overflow

Assign array of JSON objects to array of interface Angular/Typescript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related