I have an array of courses, where each course contains an array of segments. In my course-detail component, I have a specific course and I want to retrieve a segment by its ID.
For example, let's say I have the following course:
{
"id": 1,
"title": "Introduction",
"author": "Ofir",
"segments": [
{ "id": 1, "name": "lesson 1", "segment_type": "video", "data": "www.hey.com/1" },
{ "id": 2, "name": "lesson 2", "segment_type": "video", "data": "www.hey.com/1" },
{ "id": 3, "name": "lesson 3", "segment_type": "video", "data": "www.hey.com/1" },
{ "id": 4, "name": "quiz 1", "segment_type": "quiz1", "questions": [ {"id":1, "name":"q1"} ] }
]
}
And I have the segment with ID 4. I am trying to retrieve the segment object. Here is what I have attempted so far (unsuccessful and without displaying errors):
In the course.ts file:
export interface ICourse {
id: number;
title: string;
author: string;
segments: ISegment[];
}
export interface ISegment {
id: number;
unit_id: number;
unit_title: string;
name: string;
type: string;
data: string;
questions: IQuestion[];
}
export interface IQuestion {
id: number;
question: string;
answer1: string;
answer2: string;
answer3: string;
answer4: string;
correct: number;
}
In the course-play.component file:
import { Component, OnInit, Input} from '@angular/core';
import { ActivatedRoute, Router, Routes, NavigationEnd } from '@angular/router';
import { MatSidenavModule } from '@angular/material/sidenav';
import { LocalStorage } from '@ngx-pwa/local-storage';
import { ICourse } from '../course';
import { CourseService } from '../course.service';
@Component({
selector: 'lg-course-play-course-play',
templateUrl: './course-play.component.html',
styleUrls: ['./course-play.component.sass']
})
export class CoursePlayComponent implements OnInit {
errorMessage: string;
course: ICourse;
courseId: number;
public currentSegment: ISegment;
constructor(private courseService: CourseService,
private route: ActivatedRoute,
private router: Router) {
courseService.courseId$.subscribe( courseId => {
this.courseId = courseId;
})
}
ngOnInit() {
this.courseId = JSON.parse(localStorage.getItem("courseId"))
this.getCourse(this.courseId);
console.log(this.currentSegment.id);
}
getCourse(id: number) {
this.courseService.getCourse(id).subscribe(
course => this.course = course,
error => this.errorMessage = error,
const id = +this.route.snapshot.paramMap.get('id');
getCurrentSegment(id)
);
}
getCurrentSegment(id: number){
this.currentSegment = this.course.segments.find(d => d.id === id);
}
}
In the HTML file:
<div class="row content" *ngIf="course">
<div class="col-md-3">
<div id="head_sidebar">
<img src="./assets/images/lg-white.png" class="d-inline-block align-top logo" alt="" routerLink="/courses" style="outline: none">
<h3>{{course.title}}</h3>
</div>
<div class="col-md-12 sidenav">
<div class="nav nav-pills nav-stacked" *ngFor="let unit of course.segments | groupBy: 'unit_title'; let i = index">
<h6 class="course_play_title">Unit {{ i+1 }}: {{ unit.key }} </h6>
<ul *ngFor="let lesson of unit.value">
<li class="course_play_item">
<a class="nav-link" routerLink="/courses/{{course.id}}/segments/{{lesson.id}}" (click)=getCurrentSegment(lesson.id)>{{lesson.name}} </a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9 no-gutters" *ngIf="currentSegment">
<div class="col-md-12 course_play_body text-center" id="#lesson">
<h1>{{currentSegment.name}}</h1>
<p class='sub-text' *ngIf="course.segments?.length > 0">lesson {{currentSegment.id}} of {{course.segments?.length}}</p>
<hr>
<iframe *ngIf="currentSegment.segment_type === 'Video'" frameborder="0" allowfullscreen="true" src="{{currentSegment.data}}"></iframe>
</div>
</div>
</div>