Type 'void' is not assignable to type 'Lesson[]'.ts(2322) in angular 8

Question

I'm trying to pass an object to my component from an API. in the service, the data is complete

but when I'm trying to get the data in the component and console.log the data. all I get is undefined

what am I missing? why the function return noting. after all, I'm getting the data from the server
component:

export class ClassesComponent implements OnInit {
  lessons: Lesson[] = [];
  lessonsPerPage = 16;
  currentPage = 1;

  constructor(private lessonsService: LessonsService) {

  }

  ngOnInit() {
    console.log(this.lessonsService.getLessons(this.lessonsPerPage, this.currentPage)); // undifined 
    this.lessons = this.lessonsService.getLessons(this.lessonsPerPage, this.currentPage);
    console.log(this.lessons); // undifined 
  }
}

service:

export class LessonsService {
  private lessons: Lesson[] = [];
  private lessonUpdated = new Subject<{ lessons: Lesson[]; lessonCount: number }>();
  constructor(private http: HttpClient) { }

  getLessons(lessonsPerPage: number, currentPage: number) {
    const queryParams = `?pagesize=${lessonsPerPage}&page=${currentPage}`;
    this.http
      .get<{ message: string, lessons: any, maxLessons: number }>
      ('http://localhost:3000/api/lessons')
      .pipe(map(lessonData => {

        return {
          lessons: lessonData.lessons.map(lesson => {

            return {
              id: lesson.id,
              title: lesson.title,
              content: lesson.content,
              startDate: lesson.startDate,
              endDate: lesson.endDate,
              hoursStart: lesson.hoursStart,
              hoursEnd: lesson.hoursEnd,
              location: lesson.location,
              price: lesson.price,
              numberOfSessions: lesson.numberOfSessions
            };
          }),
          maxLessons: lessonData.maxLessons
        };
      })
      )
      .subscribe(transformedLesson => {
        this.lessons = transformedLesson.lessons;
        console.log(this.lessons) 
        this.lessonUpdated.next({
          lessons: [...this.lessons],

          lessonCount: transformedLesson.maxLessons
        });
      });
  }
}

ok. this is weird for me even the simplest call doesn't pass any data

    return this.http.get('http://localhost:3000/api/lessons')
      .subscribe(res => {
        // console.log(res.lessons);
        this.lessonsArr.push(res.lessons);
        console.log(this.lessonsArr);

      });

Answer 1

You should not subscribe to the HTTP request within your service, as you only need to return the values on your component itself.

export class LessonsService {
  constructor(private http: HttpClient) {}

  getLessons(lessonsPerPage: number, currentPage: number) {
    const queryParams = `?pagesize=${lessonsPerPage}&page=${currentPage}`;
    return this.http.get <{ message: string, lessons: any, maxLessons: number }> ('http://localhost:3000/api/lessons')
      .pipe(map(lessonData => {
        return {
          lessons: lessonData.lessons.map(lesson => {
            return {
              id: lesson.id,
              title: lesson.title,
              content: lesson.content,
              startDate: lesson.startDate,
              endDate: lesson.endDate,
              hoursStart: lesson.hoursStart,
              hoursEnd: lesson.hoursEnd,
              location: lesson.location,
              price: lesson.price,
              numberOfSessions: lesson.numberOfSessions
            };
          }),
          maxLessons: lessonData.maxLessons
        };
      }));
  }
}

On your component.ts, you will need to subscribe to the service method to return the observable values from the HTTP request.

ngOnInit() {
  this.lessonsService.getLessons(this.lessonsPerPage, this.currentPage).subscribe(res => {
    // do the rest here 
    this.lessons = res;
  });
}