title: Angular 9 mapping a json response to array
body: <p>I have this interface</p>
  
  <pre><code>export interface Student {
      cf: string,
      firstName: string,
      lastName: string,
      dateOfBirth: Date,
      description?: string,
      enrollmentDate?: Date
  }
  </code></pre>
  
  <p>I want to populate an array of students with a <em>http get request</em>, which returns the following json for each student</p>
  
  <pre><code>{cf: "blablabla", first_name: "Mario", last_name: "Rossi", date_of_birth: "1998-01-24", enrollment_date: "2019-03-20" },
  </code></pre>
  
  <p>As you can see, the interface has different names from the response (<em>firstName</em> instead of <em>first_name</em>), so when I print to the console the names of the students I get <strong>undefined</strong>.</p>
  
  <p>This is the service function from which I get the data </p>
  
  <pre><code>  getStudents(): Observable&lt;Student[]&gt; {
      return this.httpClient.get&lt;Student[]&gt;(this.studentsUrl, this.baseService.httpOptions);
    }
  </code></pre>
  
  <p>And here is my students component</p>
  
  <pre><code>export class StudentsComponent implements OnInit {
  
    students: Student[];
    childIcon = faChild;
    plusIcon = faPlus;
    private _newStudent: boolean = false;
  
    constructor(private studentsService: StudentsService) { }
  
    ngOnInit(): void {
      this.studentsService.getStudents().subscribe(
        (result: Student[]) =&gt; {
          this.students = result;
          this.students.forEach(student =&gt; console.log(student));
        },
        error =&gt; console.log(error)
      )
    }
  }
  </code></pre>
  
  <p>Is there a way to convert the json response to my Student interface? Several answers on stack overflow suggest <strong>map</strong> is the way, but I don't understand how to use that operator alog with <strong>subscribe</strong></p>