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