WebサービスからJSONへのXML変換とオブジェクトへのマッピング - 角度

Question

編集：解決

角度を使用してプロジェクトを作成するプロセス。 私はオブジェクトのリストを表示しようとしているサービスを持っています。 http.getを使用して、jsonへの応答をプロジェクトのオブジェクト（プロジェクトID、名前などのプロパティを持つオブジェクト）にマップしようとします。問題は、データが（開発チームチームの）WebサービスがXMLフォーマット。

私は私のアプリを実行すると、全くデータが返されない：

Webサービスは、次のようになります。 この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

あなたはこの

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

this.project = responseがいる場合にのみ動作します行うことができ、この

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); 

とコンポーネントのような何かを行うことができますこれに応答して、api/backendはthis.projectの正確なレプリカを送信しています。あなたはre 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);