title: Angular 2, mapping the values of object item into class using Cerialize Library
body: <p>I've got a JSON data which goes like this : </p>
  
  <pre><code>{
  "courses_purchased_count": 0,
  "featured_lesson": {
      "lesson": {
          "id": 290,
          "name": "Christmas Test  #290",
          "course": {
              "id": 43,
              "name": "Christmas Test ",
              "description": "",
              "teacher": {
                  "id": 4,
                  "name": "Sandy's Teacher",
                  "email": "xyz@s.com",
                  "role": "TEACHER",
                  "token": "xyz",
                  "about": "Blah blah blah ",
                  "phone": "2222222222",
                  "image_url": "xyz",
                  "payment_information": {}
              },
              "image": "xyz",
              "cover_image": "xyz",
              "course_type": "WEEKLY_ONGOING",
      },
      "status": "NEXT_AVAILABLE"
  }
  }
  </code></pre>
  
  <p>What I'm trying to do is to map the data into a class which I have created in my models.ts which goes like this using <a href="https://github.com/weichx/cerialize#deserializing_new_instances" rel="nofollow noreferrer">Cerializable Library</a></p>
  
  <p><strong>models.ts</strong></p>
  
  <pre><code>import { deserialize, deserializeAs, Deserialize } from 'cerialize';
  
  /* UTILTY METHODS */
  
  export function cast(data, modelClass) {
    return Deserialize(data, modelClass)
  }
  
  export function castCollection (collection, modelClass) {
    return collection.map( item =&gt; cast(item, modelClass))
  }
  
  /* MODELS */
  
  export class Teacher {
  
    @deserialize name: string
  }
  
  export class Course {
  
    @deserialize id: number
    @deserialize name: string
    @deserialize image: string
    @deserializeAs(Teacher) teacher : Teacher
  
  }
  
  export class Lesson {
  
    @deserialize id: number
    @deserialize name: string
    @deserialize start_time : Date
    @deserializeAs(Course) course : Course
  }
  
  export class Featured {
    @deserialize status : string
    @deserializeAs(Lesson) lesson : Lesson
  }
  </code></pre>
  
  <p>In my homepage I just want to show up the data from the lesson object like this : <strong>{{featured_lesson.lesson.name}}</strong> or from course object like <strong>{{featured.lesson.course.name}}</strong> but due to some sort of error I'm getting this error : </p>
  
  <pre><code>ERROR TypeError: Cannot read property 'name' of undefined
  </code></pre>
  
  <p>The homepage components are : </p>
  
  <p><strong>homepage.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { deserialize, Deserialize } from 'cerialize'
  import { HttpClient } from '@angular/common/http';
  import { cast, castCollection, Lesson, Featured } from "../../../models/models";
  
  @Component({
    selector: 'app-my-classes',
    templateUrl: './my-classes.component.html',
    styleUrls: ['./my-classes.component.css']
  })
  
  export class MyClassesComponent implements OnInit {
  
     featured_lesson : Featured[] = []
  
     constructor(private http : HttpClient) { }
  
     ngOnInit() {
  
     }
  
     ngAfterViewInit(){
       this.http.get("/ui/student/home").subscribe( data =&gt; {
         this.featured_lesson = castCollection(data['featured_lesson'], Featured)
     })
     }
   }
  </code></pre>
  
  <p><strong>homepage.component.html</strong></p>
  
  <pre><code>&lt;layout-app&gt;
  
    &lt;div&gt;
      {{featured_lesson.lesson.name}}
    &lt;/div&gt;
  
  &lt;/layout-app&gt;
  </code></pre>
  
  <p>Since I've tried doing these things, these are : </p>
  
  <ul>
  <li>feautred_lesson : Featured[] = {}, since I thot it is an object so may be giving the object will do but we got an error saying <code>Type '{}' is not assignable to type 'Featured[]'.
  Property 'includes' is missing in type '{}'.</code></li>
  <li>I tried getting value of the "status" like this <strong>{{featured_lesson.status}}</strong> which gave the error as <code>ERROR TypeError: collection.map is not a function
  at castCollection (models.ts:10)</code> </li>
  <li><p>Treid doing this for getting the object like this : </p>
  
  <p><code>ngAfterViewInit(){
    this.http.get("/ui/student/home").subscribe( data =&gt; {
    this.lessons = castCollection(data['other_lessons'], Lesson)
    //this.featured_lesson = castCollection(data['featured_lesson'], Featured)
    this.featured_lesson = data['featured_lesson']
  })</code></p></li>
  </ul>
  
  <p>and in console.log(this.featured_lesson) gave me the result but when I tried to print it in my html file like this <strong>{{featured_lesson.lesson.name}}</strong> same error <code>cannot read porperty "name"</code> </p>
  
  <p>I'm searching for the solution, guidance is required since I'm a leaner and want to know about angular more. This things will help me for sure. Thanks</p>