I am unable to iterate nested objects on the basis of key in angular

Question

I am working on Angular app and I have an end point which return the following JSON as a response:

{
    "SuggestedCourses": 
    [
        {"courseId": "1","courseName": "SCourese1"},
        {"courseId": "2","courseName": "SCourese2"}
    ],
    "AvailableCourses": 
    [
        {"courseId": "3","courseName": "SCourese1"},
        {"courseId": "4","courseName": "SCourese2"}
    ],
    "RegisteredCourses": 
    [
        {"courseId": "5","courseName": "SCourese1"},
        {"courseId": "6","courseName": "SCourese2"}
    ]
}

I want to iterate just SuggestedCourses and I tried following way:

courses.component.ts

import { Component, OnInit } from '@angular/core';
import {CoursesService} from 'src/app/shared/services/courses.service'
@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit {

  constructor(private _courseService:CoursesService) { }
  
coursesData=[];

  ngOnInit(): void {
this._courseService.getCourseData().subscribe(data=>this.coursesData=data)

  }
}
}

observeables and services working correctly and getting the data successfully. but I can't display on HTML page as follow:

courses.component.html

<ul>               
    <li *ngFor="let s of coursesData.SuggestedCourses">
        <div>{{s.courseName}}</div>
    </li>
</ul>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BaseModuleModule} from './shared/base-module/base-module.module';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { QuizComponent } from './components/quiz/quiz.component'
import {HttpClientModule} from '@angular/common/http'
import {UserService} from './shared/services/user.service';
import { CoursesComponent } from './components/courses/courses.component';
import { CourseModuleComponent } from './components/course-module/course-module.component'

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    QuizComponent,
    CoursesComponent,
    CourseModuleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BaseModuleModule,
    HttpClientModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

when I run the code then it displays the following Error:

The class 'CoursesComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

But when I iterate over any simple JSON (not nested) then it working correctly. Please let me know how I can solve this?

Also, let me know am I using the correct approach to do this task? if not, then please guide me that how I can do this task in another way?

Thank you so much!

Answer 1

There is a problem with your courses.component.ts. From what I see, your endpoint is returning a JSON object, not an array.

So you have to change the coursesData type from array to any (or to create an interface with the properties).

I have created a Stackblitz with this.