how ionic framework get data from asp.net web api - angularjs

Question

I've created Asp.net Web API project .
When I browse http://localhost:55858/api/myData
it returns
<ArrayOfquoteMain>
<quoteMain>
<despt>Hello , data 1</despt>
<id>1</id>
<reference>Hello data 1</reference>
</quoteMain>
<quoteMain>
<despt>Hello , data 2</despt>
<id>2</id>
<reference>Hello data 2</reference>
</quoteMain>
<quoteMain>
<despt>Hello , data 3</despt>
<id>3</id>
<reference>Hello data 3</reference>
</quoteMain>
</ArrayOfquoteMain>
I just want to show this data as a list in my ionic app .
I've created Ionic app using ionic start ionic2-http blank --v2.
But I don't know how to use with my asp.net web API.

Answer 1

You will need to create apiService from your ionic project.
for example:
import { Injectable } from '#angular/core';
import { HttpClient, HttpParams} from '#angular/common/http';
#Injectable()
export class apiService{
constructor(private http: HttpClient) { }
serviceBaseUrl:string = http://localhost:55858/';
getData(){
let apiUrl = `${this.serviceBaseUrl}api/myData`;  
return this.http.get<any>(apiUrl);
}
}
Which you will then call it from any component using below code:
getData() {
this.apiService.getData().subscribe(
data => {
var myData = data;
console.log(myData);
},
error => console.error(error),
() => {
})
}

Answer 2

Is the error you are getting No 'Access-Control-Allow-Origin'...? If so you need to handle CORS in your ionic project.
CORS is only an issue when we are running or testing our app when running ionic serve.
To enable this in your ionic project, modify the ionic.config.json to include the proxies tag:
{
"name": "myionicproj",
"app_id": "",
"v2": true,
"typescript": true,
"proxies": [
{
"path": "/api",
"proxyUrl": "http://localhost:55858/api"
}
]
}
The proxy URL is the url of your .NET web api running locally. You can replace it with your environment url.
To view the results in console.log in your typescript class:
import { Component } from '#angular/core';
import {Http} from "#angular/http";
import 'rxjs/add/operator/map';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public http: Http) {
this.http.get('http://localhost:8100/api/myData').map(res => res.json()).subscribe(data => {
console.log(data);
});
}
}
http://localhost:8100 is your ionic localhost. It proxy the .net web api http://localhost:55858/api end point via your local ionic server http://localhost:8100/api