Converting XML From Web Service to JSON & Mapping to an object - Angular

Question

edit: solved

In the process of creating a project using angular. I have a service which is trying to display a list of objects. It uses a http.get and tries to map the response to json then to an object of Project(Which has properties project ID, name etc.) The problem is that the web service the data is from (on dev-teamcity) is in XML Format.

The web service looks like this:

When I run my app, no data at all is returned. How do I go about mapping this XML data to my Project object? I'm new to both angular and JS/TS and would appreciate any bit of help with this. Thanks in advance. My Code:

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


}

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

project-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>

Junaid Junaid · Accepted Answer · 2017-09-14T08:46:47

you can do something like this

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

and in your component you could do this

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

this.project = response will only work if in response, you api/backend is sending the exact replica of this.project, you may have to use reponse.data or response.result depending upon the data format that your api returns. You can console.log(response) and view the format of response.

Edit: You can call http.get(this.baseurl) if you don't want to use options and call it like this.

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

Converting XML From Web Service to JSON & Mapping to an object - Angular

1 Answers