Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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"}
    ]
}


What I have tried:

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)

  }
}
}

observeable 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!
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900