How to display data from mvc controller using angular2

Question

I have created a project including angular2 for front-end and i also created webapi project to consume data from database. Controller Code return model:

UserInfo = JsonConvert.DeserializeObject<List<UsersVM>>(Response);

I want to iterate over this data model in my angular view. i trid creating angular http calls. but this not acceptable in my case. i need to call webapi from my mvc controllers and just to render that data from angular2 views.

Angular Model is :

export interface IUser {
Id: number;
ProductName: string;
ProductPrice: string;

}

Angular Service Code is:

import {
Injectable
} from '@angular/core';
import {
Http, Response, RequestOptions,
Request, RequestMethod, Headers
} from '@angular/http';
import {
   IUser
} from './user';

import {
Observable
} from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
@Injectable()
export class UserService {
private _productUrl = 'Home/GetAllProducts';  
constructor(private _http: Http) { }   
getProducts(): Observable<IUser[]> {        
    return this._http.get(this._productUrl)
        .map((response: Response) => <IUser[]>response.json().value)
        .catch(this.handleError);
}

private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}
 }

Stuck in this, any links available in google doesn't correctly solve my issue. Please guide. Thanks

I think that you need to call the complete URL like: localhost:PORT/Home/GetAllProducts — Rafael Ferreira
– Rafael Ferreira, Commented Mar 22, 2018 at 13:25
What is the error you get? Also, you should use the new http api instead of the old one: angular.io/guide/http — ForestG
– ForestG, Commented Mar 22, 2018 at 13:27
i am having correct data in my mvc controller method, i want to bind that and loop over using angular2, the this is i am new in angular2. — krunal patel
– krunal patel, Commented Mar 22, 2018 at 13:30
@krunalpatel "this._productUrl" should be actual 'hosted path of api' + 'route path of api' for example. "localhost:50962/products/getdetails/1" — Amol Bhor
– Amol Bhor, Commented Mar 22, 2018 at 13:58

Amol Bhor · Accepted Answer · 2018-03-22 14:15:35Z

You have mentioned _productUrl as your API path, but it should be actual API URL with domain name and action call.

as :

private _productUrl = 'localhost:50962/products/';

Eg.

Service.ts

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions,Request, RequestMethod, Headers } from '@angular/http';
import { IUser } from './user';    
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {

  private _productUrl = 'localhost:50962/products/';

  constructor(private _http: Http) { }   

  getProducts(): Observable<IUser[]> {   

    let header = this.initHeaders();
    let options = new RequestOptions({ headers: header, method: 'get' });

    return this._http.get(this._productUrl + 'getAllProducts', options)
        .map((response: Response) => <IUser[]>response.json().value)
        .catch(this.handleError);
  }

  private initHeaders(): Headers {
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');
    return headers;
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }
}

Also you can set environment variable for your API and use it in all your services. environment.API

export const environment = {
  API: 'http://localhost:50962/',
  WordPressAPI: 'http://localhost:58451/',
  FacebookClientId: '45******',
}


return this._http.get(environment.API + 'products/getAllProducts', options)
        .map((response: Response) => <IUser[]>response.json().value)
        .catch(this.handleError);

Leon · Accepted Answer · 2018-03-22 13:51:54Z

0

You can use ngFor and the AsyncPipe

<div *ngFor="let user of getProducts() | async">
    {{user.Id}}
    {{user.ProductName}}
    {{user.ProductPrice}}
</div>

answered Mar 22, 2018 at 13:51

Leon

4804 silver badges8 bronze badges

1 Comment

Leon Over a year ago

asuming that you have a component that uses your service and with this template, yes

Geovanny Q. Perez · Accepted Answer · 2018-03-22 14:28:26Z

0

A combination from both (use full path) Amol Bhor & Leon, and instead has the uri vars into env file use constants.ts file because for me environment is related to dev or prod environments. And to avoid memory leaks use asyn pipe, if not use unsubscribe into onDestroy method. Check docs for detail info.

answered Mar 22, 2018 at 14:28

Geovanny Q. Perez

246 bronze badges

1 Comment

Amol Bhor Over a year ago

Correct. It make sense and best practice that for every service and data call's from 'component.ts' we should use unsubscribe() using Subscription class.

Collectives™ on Stack Overflow

How to display data from mvc controller using angular2

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related