Angular failing during parsing php json return

Question

I'm getting http parsing error on my Angular get method when reading json from php backend api. I've used json_encode for generating json in php and I've set {responseType: 'json'} on get method parameter in Angular, but still no return. How can I correctly parse it in Angular?

list.php

<?php
include('connection.php');

$sql = "SELECT * FROM courses";
$data = $conn->query($sql);

$courses = [];
$index = 0;

foreach($data as $row) {
  $courses[$index]['courseId'] = $row['courseId'];
  $courses[$index]['courseName'] = $row['courseName'];
  $courses[$index]['coursePrice'] = $row['coursePrice'];
  $index++;
}

json_encode(['data'=>$courses]);

var_dump($courses);

?>

PHP return

array(2) {
  [0]=>
  array(3) {
    ["courseId"]=>
    int(1)
    ["courseName"]=>
    string(7) "Angular"
    ["coursePrice"]=>
    string(6) "850.00"
  }
  [1]=>
  array(3) {
    ["courseId"]=>
    int(2)
    ["courseName"]=>
    string(10) "Javascript"
    ["coursePrice"]=>
    string(6) "550.00"
  }
}

course.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Course } from './course';
import { CourseService } from './course.service';

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {

  courses: Course[] = [];
  course = new Course();

  constructor(
    private courseService: CourseService
    ) { }

  ngOnInit(): void {
    this.list();
  }

  list() {
    this.courseService.list().subscribe((res: Course[]) => {
      this.courses = res;
    });
  }

}

course.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { Course } from './course';

@Injectable({
  providedIn: 'root'
})
export class CourseService {

  url = "http://localhost:9000/backend/";

  courses: Course[] = [];
  course: Course = new Course();

  constructor(
    private http: HttpClient
  ) { }

  list(): Observable<Course[]> {
    return this.http.get(`${this.url}list.php`, {responseType: 'json'}).pipe(map((res: any) => {
        this.courses = res['data'];
        return this.courses;
      })
    );
  }
}

Error in Angular

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null
    },
    "status": 200,
    "statusText": "OK",
    "url": "http://localhost:9000/backend/list.php",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure during parsing for http://localhost:9000/backend/list.php",
    "error": {
        "error": {},
        "text": "array(2) {\n  [0]=>\n  array(3) {\n    [\"courseId\"]=>\n    int(1)\n    [\"courseName\"]=>\n    string(7) \"Angular\"\n    [\"coursePrice\"]=>\n    string(6) \"850.00\"\n  }\n  [1]=>\n  array(3) {\n    [\"courseId\"]=>\n    int(2)\n    [\"courseName\"]=>\n    string(10) \"Javascript\"\n    [\"coursePrice\"]=>\n    string(6) \"550.00\"\n  }\n}\n"
    }
}