웹 서비스에서 JSON으로 XML 변환 및 객체에 매핑 - 각도

Question

편집 : 해결

각도를 사용하여 프로젝트를 만드는 과정. 개체 목록을 표시하려고하는 서비스가 있습니다. http.get을 사용하여 json에 대한 응답을 프로젝트의 객체 (프로젝트 ID, 이름 등등 속성을 가짐)에 매핑하려고 시도합니다. 문제는 데이터가 (dev-teamcity에있는) 웹 서비스가 XML 형식.

웹 서비스는 다음과 같습니다 :

내 응용 프로그램을 실행 는 전혀 데이터가 반환되지 않습니다. 이 XML 데이터를 Project 객체에 매핑하는 방법은 무엇입니까? 저는 각도와 JS/TS를 처음 접했고 이에 대한 도움이 조금이라도 감사 할 것입니다. 미리 감사드립니다. 내 코드 :

project.model.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; 
    } 
} 

project.service.ts :

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

} 

project.service.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."); 
    } 


} 

프로젝트 .viewer.component.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; 
    } 
} 

프로젝트 viewer.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> 

Answer 1

는이

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 fetchProjects() { 
     this.service 
      .fetchProjects() 
      .subscribe(response =>{ 
       this.projects = response; 
      }, 
      errors=>{ 
       console.log(errors); 
      } 
    }); 

this.project = response가있는 경우에만 작동 할 수 이에 대한 응답으로 api/backend가 this.project의 정확한 복제본을 보내고 있습니다. api가 반환하는 데이터 형식에 따라 ponse.data 또는 response.result. console.log (응답) 및 응답 형식을 볼 수 있습니다.

편집 : 옵션을 사용하지 않으려는 경우 http.get (this.baseurl)을 호출 할 수 있습니다.

return this.http.get(this.baseurl) 
      .map((response: Response) => { 
      return response.json(); 
      }) 
      .catch(this.handleError);