custom mapping json file in angular 6 from rails api project - ruby-on-rails

Question

I'm new to Angular and I'm having a problem with map data from my Rails app to the Angular app. I know I need to do some customisation to the code, but I don't really know how.
I want to mention that I'm using Rails 5.2 and Active Model Serializer for the json request.
In my rails app I have Course,Segment,Quiz,Video models and the relations are:
Course had many Segments
Segments can be Quiz or Video and I use STI so the quizzes and videos
are in segments table
This is the json file I get from the rails app and I want to map:
[
{
"id":1,
"title":"Introduction",
"author":"Dana Inbar",
"segments":[
{
"id":1,
"name":"Intro01",
"data":"http://www.video.com/1/1"
},
{
"id":2,
"name":"Intro02",
"data":"http://www.video.com/1/2"
},
{
"id":3,
"name":"Intro03",
"data":"[
{
"question 1" : "___",
"answers" : {
"1" : "____",
"2" : "____",
"3" : "____"
},
"correct_answer" : "2"
},
]"
}
]
},
{
"id":2,
"title":"Master the ELN",
"author":"Dana Inbar",
"segments":[
]
},
{
"id":3,
"title":"Master the Inventory",
"author":"Dana Inbar",
"segments":[
]
}
]
This are my angular files:
app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { RouterModule, Routes } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CourseModule } from './courses/course.module';
import { CourseService } from './courses/course.service';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
CourseModule,
FormsModule
],
providers: [CourseService],
bootstrap: [AppComponent]
})
export class AppModule { }
courses/course
export interface IQuiz {}
export interface IVideo {}
export interface ISegment {
segment_id: string;
name: string;
type: string;
data: string;
}
export interface ICourse {
course_id: number;
title: string;
autor: string;
segments: {
[segment_id: string]: ISegment,
[name: string]: ISegment,
[type: string]: ISegment,
[data: string]: ISegment
}
}
courses/course.service
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, tap, catchError } from 'rxjs/operators';
import { ICourse } from './course';
// Inject Data from Rails app to Angular app
#Injectable()
export class CourseService{
private courseUrl = 'http://localhost:3000/courses.json';
constructor(private http: HttpClient) { }
// Get Courses from Rails API App
getCourses(): Observable<ICourse[]> {
return this.http.get<ICourse[]>(this.courseUrl)
.map((res: Response) => res.json()data)
.catch(this.handleError);
}
// Handle Any Kind of Errors
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server Error');
}
}
courses/course.module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { MatSidenavModule } from '#angular/material/sidenav';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { CourseListComponent } from './course-list/course-list.component';
import { CourseDetailComponent } from './course-detail/course-detail.component';
import { CourseService } from './course.service';
import { CoursePlayComponent } from './course-play/course-play.component';
const coursesRoutes: Routes = [
{ path: 'courses', component: CourseListComponent },
{ path: 'courses/:id', component: CourseDetailComponent },
{ path: 'courses/:id/1', component: CoursePlayComponent }
]
#NgModule({
imports: [
CommonModule,
MatSidenavModule,
BrowserAnimationsModule,
RouterModule.forChild(
coursesRoutes
)
],
declarations: [
CourseListComponent,
CourseDetailComponent,
CoursePlayComponent
],
providers: [
CourseService
]
})
export class CourseModule { }
courses/course-list/course-list.component
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute, Router } from '#angular/router';
import { ICourse } from '../course';
import { CourseService } from '../course.service';
#Component({
selector: 'lg-course-list',
templateUrl: './course-list.component.html',
styleUrls: ['./course-list.component.sass']
})
export class CourseListComponent implements OnInit {
pageTitle = "LabGuru Academy";
courses: ICourse[] =[];
errorMessage: string;
constructor(private courseService: CourseService) { }
ngOnInit() {
this.courseService.getCourses()
.subscribe(
courses => this.courses = courses,
errorMessage => this.errorMessage = <any>error
);
}
}
courses/course-list/course-list.html
<div class="row mt-3 no-gutters">
<div class="col-lg-8">
<img src="./assets/images/lg-purple.png" class="d-inline-block align-top" alt="">
</div>
</div>
<div class="jumbotron">
<div class="container text-center">
<h1>{{pageTitle}}</h1>
</div>
</div>
<div class="container-fluid bg-3 text-center">
<div class="row justify-content-lg-center">
<div class="col-sm-3" *ngFor="let course of courses | async">
<div class="card">
<div class="card-body">
<h3 class="card-title">{{course.title}}</h3>
<p class="card-text"><small class="text-muted">6 Lessons</small></p>
</div>
</div>
</div>
</div>
</div>
<br><br>
courses/course-list/course-list.sass
$pos: 70px
$color: #5c0099
$bg-col: #FFFFFF
$hig: 15rem
$wid: 15rem
$left: 5%
$top: 30%
$right: 7%
.jumbotron
background-color: transparent
color: $color
.col-sm-3
position: relative
min-height: 1px
padding-left: $left
outline-offset: none
.card
border-color: $color
background-color: $bg-col
width: $wid
height: $hig
.card-title
position: absolute
text-align: center
padding: inherit
.card-text
position: absolute
bottom: $left
right: $right