when using a GET method data is coming in console not in HTML

I have written my get method inside ngOnInIt(). When I am printing data in console it is visible, but when printing in HTML using interpolation, it is returning [ object object]

{{filteredCourses}} ==> [object object]

and when i am using {{course.category|json}} so here i am getting all values of array ["course" : "database" , "category" : "database" , "length" : "2hr" ] thats how the value is coming

html :-

<div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [@animateStagger]="{value:'50'}">

                <div class="course" *ngFor="let course of filteredCourses"   fxFlex="100" fxFlex.gt-xs="50"
                     fxFlex.gt-sm="33" [ngClass]="course.category" [@animate]="{value:'*',params:{y:'100%'}}">

                    <div class="course-content" fxLayout="column" fxFlex="1 1 auto">

                        <div class="header" fxLayout="row" fxLayoutAlign="center center"
                             [ngClass]="course.category + '-bg'">

                            <div class="category" fxFlex>
                                {{course.category|json}}
                            </div>
</div>
</div>

Code: filteredCourses: any[];

this.product_name = getProduct()['name'];
console.log(this.product_name);
this.token = getToken();
this.httpHeaders = new HttpHeaders({ "Authorization": "Bearer " + this.token });

this._httpClient.get('http://127.0.0.1:8000/api/products/info/'+this.product_name+'/',{headers: this.httpHeaders})
        .subscribe(
                    data => {
                        this.product = data; 
                        this.courses = data['cources'];
                        this.filteredCourses = this.courses;
                        console.log(this.filteredCourses);
                    },
                    error => {
                       console.log(error);
                    }
                );