將XML從Web服務轉換爲JSON並映射到對象 - 角

Question

編輯：解決

在使用angular創建項目的過程中。 我有一個服務試圖顯示對象的列表。它使用http.get並嘗試將響應映射到json，然後映射到Project（其中包含屬性項目ID，名稱等）的對象。問題是數據來自的Web服務（在dev-teamcity上）是XML格式。

Web服務是這樣的：

當我運行我的應用程序，則返回根本沒有數據。 如何將這個XML數據映射到我的Project對象？ 我對angular和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 /後端正在發送完整的this.project副本，你可能不得不使用re ponse.data或response.result，這取決於你的api返回的數據格式。您可以通過console.log（response）並查看響應的格式。

編輯：如果你不想使用選項並調用它，你可以調用http.get（this.baseurl）。

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