0

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.

2 Answers 2

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),
      () => {
      })
  }
Sign up to request clarification or add additional context in comments.

Comments

0

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

1 Comment

The code above is for demo purpose. For best practice, you will have to create a service that you have to inject.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.