Преобразование XML из веб-службы в JSON и сопоставление с объектом — Angular

редактировать: решено

В процессе создания проекта с использованием angular. У меня есть служба, которая пытается отобразить список объектов. Он использует http.get и пытается сопоставить ответ с json, а затем с объектом Project (который имеет идентификатор проекта свойств, имя и т. д.). Проблема в том, что веб-служба, из которой получены данные (в dev-teamcity), находится в Формат XML.

Веб-сервис выглядит следующим образом:

Когда я запускаю свое приложение, данные вообще не возвращаются. Как мне сопоставить эти XML-данные с моим объектом проекта? Я новичок как в angular, так и в JS/TS, и буду признателен за любую помощь в этом. Заранее спасибо. Мой код:

проект.модель.тс:

export class Project {
    project_id: string;
    name: string;
    description: string;

    constructor(obj: any) {
        this.project_id = obj.project_id;
        this.name = obj.name;
        this.description = obj.description;
    }
}

проект.service.ts:

export abstract class ProjectService {
    //methods
    abstract fetchProjects(): Observable<Project[]>;

}

проект.сервис.http.ts:

@Injectable()
export class ProjectServiceHttp extends ProjectService {

    //variables
    baseUrl = "...";

    //constructor
   constructor(private http: Http) {
        super();
    }

    //methods
    fetchProjects(): Observable<any>{
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});
        return this.http.get(this.baseUrl, options)
          .map((response: Response) => 
          {
            return response.json();
          })
          .catch(this.handleError);
        }

        private handleError(error: any) {
            // In a real world app, we might use a remote logging infrastructure
            // We'd also dig deeper into the error to get a better message
            let errMsg = (error.message) ? error.message :
                error.status ? `${error.status} - ${error.statusText}` : 'Server error';
            console.log(errMsg); // log to console instead
            return Observable.throw(errMsg);
        }

    GetProjectStatus(project_id: string): string {
        throw new Error("Method not implemented.");
    }
    GetProjects(project_id: string): Project[] {
        throw new Error("Method not implemented.");
    }


}

проект.просмотрщик.компонент.html:

@Component({
    selector: 'project-viewer',
      templateUrl: './project-viewer.html',  
    styleUrls: ['./project-viewer.css']
})

export class ProjectViewerComponent  {
    name = 'ProjectViewerComponent';
    projects: Project[];
    errorMessage = "";
    stateValid = true;

    constructor(private service: ProjectService) {
        this.fetchProjects();
    }

    private fetchProjects() {
        this.service
            .fetchProjects()
            .subscribe(response =>{
              this.projects = response;
              console.log(response);
            },
            errors=>{
               console.log(errors);
            });
    }

    private raiseError(text: string): void {
        this.stateValid = false;
        this.errorMessage = text;
    }
}

проект-просмотрщик.html:

<h3>Projects </h3>
<div >
    <ul class= "grid grid-pad">
        <a *ngFor="let project of projects" class="col-1-4">
            <li class ="module project" >
                <h4 tabindex ="0">{{project.project_id}}</h4>
            </li>
        </a>
    </ul>
</div>