in typescript How to write http service in function - angular2-routing

Here i know hou to use http service in this way but how can i write service when its in function Like
export class studentController {
GetStudentData() {
constructor(http: Http) {
http.get('api/Employee').subscribe(result => {
this.student = result.json();
})
}
}
export class StudentMastre {
stdID: Number;
stdName: string;
email: string;
Phone: string;
Address: string;
}

You need to make a service to request the data and get, then use the service inside the component to get the data,
Your sample service should be,
#Injectable()
export class CategoryService {
constructor(private http: Http) { }
c(): Observable<StudentMastre[]> {
let wikiUrl = return this.http
.get('api/Employee')
.map(this.extractData)
.catch(this.handleErrors);
}
private extractData(res: Response) {
let data = res.json();
return data;
}
private handleErrors (error: Response | any) {
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
then in your component,
this.sampleService.
this.categoryService.getCategoriesService().subscribe(students=> {
this.students= students;
}, error => this.errorMessage = error);

Related

How can I abstract fetch in sveltkit for ssr?

I'm trying to pass in fetch which apparently isn't defined in my api libraries when using ssr:
<script context="module">
import setup from '$api/create-api';
import Jobs from '$api/jobs';
export async function load({ fetch }) {
setup(fetch);
const jobs = await Jobs.getAll();
return {
props: { jobs }
};
}
</script>
create-api.js
import { browser } from '$app/env';
let fetch = fetch || null;
async function api(path, body = {}, opts = {}) {
path = import.meta.env.VITE_API_ENDPOINT + path;
body = JSON.stringify(body);
const method = opts.method || 'GET';
const headers = {};
if (browser) {
const token = localStorage.getItem('token');
headers.Authorization = token ? 'Bearer ' + token : '';
}
const res = await fetch(path, {
method: opts.method || 'GET',
body: method === 'GET' ? null : body,
headers
});
if (res.ok) {
return await (opts.raw ? res.text() : res.json());
}
throw res;
}
export default api;
export const setup = (f) => {
fetch = f;
};
jobs.js
import api from './create-api';
class Jobs {
static async getAll() {
return await api('/jobs');
}
static async getAllMine() {
return await api('/jobs/me');
}
static async create(job) {
return await api('/jobs', job, { method: 'POST' });
}
static async update(job) {
return await api('/jobs/' + job.id, job, { method: 'PUT' });
}
static async deleteById(id) {
return await api('/jobs/' + id, {}, { method: 'DELETE' });
}
static async getById(id) {
console.log(id);
return await api('/jobs/' + id, {}, { method: 'GET' });
}
}
export default Jobs;
It seems you have to use the fetch passed into the script module for some reason. I tried installing node-fetch but got a ton of errors.

How to Make http Request to My Project API from Firebase Cloud function?

Hello I am trying to make an API Post request using Firebase cloud function,Here are the code.
My effort is to get details from cloud and make an http request to my project's API. But i am getting an error of can not find module!!i have already put it.
so how to make an api call??
Here is my index.ts
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import {TenantServiceProxy, CreateTenantInput} from '../../src/app/cloud/cloud-service';
let _tenantService: TenantServiceProxy;
const tenant = new CreateTenantInput();
admin.initializeApp();
export const onOrganizationUpdate =
functions.firestore.document('organizations/{id}').onUpdate(change => {
const after = change.after.data()
const payload = {
data: {
OrganizationId: String(after.OrganizationId),
Name: String(after.Name),
IsDeleted: String(after.IsDeleted)
}
}
console.log("updated", payload);
https.get('https://reqres.in/api/users?page=2', (resp: any) => {
let data = '';
// A chunk of data has been recieved.
resp.on('data', (chunk: any) => {
data += chunk;
});
// The whole response has been received. Print out the result.
resp.on('end', () => {
console.log("-------------------->",JSON.parse(data));
});
}).on("error", (err: any) => {
console.log("Error: " + err.message);
});
return admin.messaging().sendToTopic("OrganizationId", payload)
})
export const onOrganizationCreate =
functions.firestore.document('organizations/{id}').onCreate(change=>{
const onCreationTime =change.data()
const payload={
data:{
organizationId:String(onCreationTime.organizationId),
name:String(onCreationTime.name),
isDeleted:String(onCreationTime.isDeleted)
},
}
console.log("created",payload);
tenant.pkOrganization = payload.data.organizationId;
tenant.name = payload.data.name;
tenant.isDeleted = Boolean(payload.data.isDeleted);
_tenantService.createTenant(tenant).subscribe(()=>{
console.log("created",payload);
});
return admin.messaging().sendToTopic("OrganizationId",payload)
})
Here is the cloud.service.module.TS
//cloud service module
import { AbpHttpInterceptor } from '#abp/abpHttpInterceptor';
import { HTTP_INTERCEPTORS } from '#angular/common/http';
import { NgModule } from '#angular/core';
import * as ApiServiceProxies from '../../app/cloud/cloud-service';
#NgModule({
providers: [
ApiServiceProxies.TenantServiceProxy,
{ provide: HTTP_INTERCEPTORS, useClass: AbpHttpInterceptor, multi: true }
]
})
export class CloudServiceModule { }
Here is My api call service
#Injectable()
export class TenantServiceProxy {
private http: HttpClient;
private baseUrl: string;
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
constructor(#Inject(HttpClient) http: HttpClient, #Optional() #Inject(API_BASE_URL) baseUrl?: string) {
this.http = http;
this.baseUrl = baseUrl ? baseUrl : '';
}
createTenant(input: CreateTenantInput | null | undefined): Observable<void> {
let url_ = this.baseUrl + '/api/services/app/Tenant/CreateTenant';
url_ = url_.replace(/[?&]$/, '');
const content_ = JSON.stringify(input);
const options_: any = {
body: content_,
observe: 'response',
responseType: 'blob',
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
};
return this.http.request('post', url_, options_).pipe(_observableMergeMap((response_: any) => {
return this.processCreateTenant(response_);
})).pipe(_observableCatch((response_: any) => {
if (response_ instanceof HttpResponseBase) {
try {
return this.processCreateTenant(<any>response_);
} catch (e) {
return <Observable<void>><any>_observableThrow(e);
}
} else {
return <Observable<void>><any>_observableThrow(response_);
}
}));
}
protected processCreateTenant(response: HttpResponseBase): Observable<void> {
const status = response.status;
const responseBlob =
response instanceof HttpResponse ? response.body :
(<any>response).error instanceof Blob ? (<any>response).error : undefined;
const _headers: any = {}; if (response.headers) { for (const key of response.headers.keys()) { _headers[key] = response.headers.get(key); } }
if (status === 200) {
return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
return _observableOf<void>(<any>null);
}));
} else if (status !== 200 && status !== 204) {
return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
return throwException('An unexpected server error occurred.', status, _responseText, _headers);
}));
}
return _observableOf<void>(<any>null);
}
}
I have defined the module in my services.

What is wrong here.. Angular 4 with ASP .net webapi

I have created an api using ASP .net WebApi to get a list of companies and get a single company. Service call GetCompanies works fine gets the data and prints the list. But, issues is with GetCompany service, it gets the company when I print it in log, but it does not get in the Company object. What am I doing wrong in the Angular Component and or Service. Any help is appreciated.
Here is the output of the application. GetCompanies lists all the companies, but GetCompany prints as [object Object]. . here is the output
Here is the screen shot of data coming from APIs.
This is companies.component.ts
import { Component, OnInit } from '#angular/core';
import { CompaniesService } from './companies.service';
import { Company } from './company.model';
#Component({
selector: 'app-companies',
template: `
<p>
company name = {{company}}
</p>
<ul>
<li *ngFor = "let c of companies"> {{c.Name}} - {{c.CompanyID}} </li>
</ul>
`
})
export class CompaniesComponent implements OnInit {
text: string;
errorMessage: string;
public company: Company;
public companies: Company[];
constructor(private cService: CompaniesService) { }
ngOnInit() {
this.getCompanies();
this.getCompany(5);
console.log(this.company);
}
getCompanies() {
return this.cService.getCompanies()
.subscribe(companies => this.companies = companies,
error => this.errorMessage =<any>error);
}
getCompany(id: number) {
return this.cService.getCompany(id)
.subscribe(company => this.company = company,
error => this.errorMessage =<any>error);
}
}
This is companies.service.ts
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '#angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Company } from './company.model';
#Injectable()
export class CompaniesService {
constructor(private http: Http) {
}
getCompany(id: number): Observable<Company> {
return this.http.get(`api/getcompany/?id=${id}`)
.map ((res:Response) => res.json() )
.catch(this.handleError) ;
}
getCompanies(): Observable<Company[]> {
return this.http.get('api/getcompanies')
.map ((res:Response) => res.json() )
.catch(this.handleError) ;
}
private extractData(res: Response) {
let body = res.json();
return body.data || [];
}
private handleError (error: Response | any) {
// In a real world app, you might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}
code of company.model.ts
export class Company {
CompanyID: number;
Name: string;
Description: string;
EmailAddress: string;
Phone: string;
Address: string;
CreatedBy: number;
CreatedDate: Date;
UpdatedBy: number;
UpdatedDate: Date;
IsActive: boolean;
}
As you get data asynchronously you can use safe navigation operator like:
{{ company?.Name }}

Uncaught TypeError: result.subscribe is not a function

I'm getting the following error: Uncaught TypeError: result.subscribe is not a function
Here is also a screenshot of the error:
But I did tried to catch the error. Below you can see my code.
login.component.ts:
import { Component } from '#angular/core';
import { UserService } from '../../services/user.service';
import { User } from '../../models/user';
import {ToasterContainerComponent, ToasterService, ToasterConfig} from 'angular2-toaster/angular2-toaster';
#Component({
moduleId: module.id,
selector: 'login',
directives: [ToasterContainerComponent],
templateUrl: 'login.component.html',
providers: [UserService, ToasterService]
})
export class LoginComponent {
user: User = new User();
loginRes: String;
private toasterService: ToasterService;
public toasterconfig: ToasterConfig = new ToasterConfig({
showCloseButton: true,
tapToDismiss: false,
timeout: 0
});
constructor(private _userService: UserService, toasterService: ToasterService) {
this.toasterService = toasterService;
}
data = {};
onSubmit() {
this._userService.login(this.user)
.subscribe(
res => {
console.log("res onSubmit");
console.log(res);
},
function(error) { console.log("Error happened" + error)}
);
}
}
user.service.ts:
import { Injectable } from '#angular/core';
import { Headers, RequestOptions, Http, Response } from '#angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { User } from '../models/user';
#Injectable()
export class UserService {
private loginUrl: string;
constructor(private _http: Http) {
}
login(user: User) {
this.loginUrl = "http://localhost:3000/api/auth/login";
let data = { "username": user.username, "password": user.password };
let body = JSON.stringify(data);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this._http.post(this.loginUrl, body, options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body || {};
}
private handleError(error: any) {
console.log('Yup an error occurred', error);
return error.message || error;
}
}
As you can see I have tried to catch the error in the login() method in user.service.ts. Anyone that maybe knows how I can
solve this?
Your handleError() function needs to return an Observable
If you look at the HTTP Client Angular 2 docs there is an example, but for your specific case
Replace
private handleError(error: any) {
console.log('Yup an error occurred', error);
return error.message || error;
}
with
private handleError(error: any) {
console.log('Yup an error occurred', error);
return Observable.throw(error.message || error);
}

angular2 – handle same response error multiple times

I am building an angular2 app. I have a global service called HttpClient which is handling all requests before angulars builtin http service gets fired. Also this service handles all my response errors by checking the status codes:
import { Injectable } from '#angular/core';
import { Headers, Http, Response, } from '#angular/http';
import { MessageProvider } from '../../providers/message/message.provider'
#Injectable()
export class HttpClient {
private webApi = 'http://localhost:8080/api/v1/';
constructor(
private http: Http,
private messageProvider: MessageProvider) { }
get(url: string): Promise<Response> {
return this.http.get(this.webApi + url, {headers: this.createAuthorizationHeader()})
.toPromise()
.catch(this.handleError.bind(this));
}
post(url: string, data: Object): Promise<Response> {
return this.http.post(this.webApi + url, data, {headers: this.createAuthorizationHeader()})
.toPromise()
.catch(this.handleError.bind(this));
}
put(url: string, data: Object): Promise<Response> {
return this.http.put(this.webApi + url, data, {headers: this.createAuthorizationHeader()})
.toPromise()
.catch(this.handleError.bind(this));
}
delete(url: string): Promise<Response> {
return this.http.delete(this.webApi + url, {headers: this.createAuthorizationHeader()})
.toPromise()
.catch(this.handleError.bind(this));
}
private handleError (error: any) {
var status: number = error.status;
if(status == 401) {
this.messageProvider.setMessage(error);
this.messageProvider.message.text = "You have to be logged in to reach this page.";
}
let errMsg = (error.message)
? error.message
: status
? `${status} - ${error.statusText}`
: 'Server error';
console.error(errMsg); // log to console instead
return error;
}
private createAuthorizationHeader() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
if (localStorage.getItem('token'))
headers.append('Authorization', 'Bearer ' + localStorage.getItem('token'));
return headers;
}
}
Now, lets pretend the calling component was about login:
import { Component, Input, OnInit, OnDestroy } from '#angular/core';
import { Router } from '#angular/router';
import { Login } from '../../core/classes/login/login'
import { AuthenticationProvider } from '../../providers/authentication/authentication.provider'
import { MessageProvider } from '../../providers/message/message.provider'
#Component({
selector: 'my-login',
templateUrl: 'app/components/login/login.component.html'
})
export class LoginComponent implements OnInit, OnDestroy {
#Input() login: Login;
error: any;
constructor(
private authProvider: AuthenticationProvider,
private route: Router,
private messageProvider: MessageProvider) { }
ngOnInit() {
this.login = new Login();
}
ngOnDestroy() {
this.messageProvider.setDefault();
}
onSubmit() {
this.authProvider.login(this.login)
.then(auth => {
if (this.authProvider.isAdmin())
this.route.navigateByUrl('admin/users');
else if (this.authProvider.isLoggedIn())
this.route.navigateByUrl('/');
})
.catch(error => {console.log(error);});
}
}
In this case I don't want the error from the HttpClient ("You have to be logged in to reach this page.") but a more customized message like "No user found". I know that I could do something like the following but there is no error anymore:
onSubmit() {
this.authProvider
.login(this.login)
.then(auth => {
if (this.authProvider.isAdmin())
this.route.navigateByUrl('admin/users');
else if (this.authProvider.isLoggedIn())
this.route.navigateByUrl('/');
})
.catch(error => {
var status: number = error.status;
if(status == 401) {
this.messageProvider.setMessage(error);
this.messageProvider.message.text = "No user found.";
}
});
}
So is there a way to maybe cause another error in the catch() function within the HttpClient? So I can handle the error again in my LoginComponent.
I think you can throw in the catch method to essentially "map" your error. If you want to also update your messageProvider then you could do...
.catch(error => {
var status: number = error.status;
var newError = {};
if(status == 401) {
this.messageProvider.setMessage(error);
this.messageProvider.message.text = "No user found.";
newError.errorMessage = "No user found.";
}
throw newError;
});
Confirmed with this example:
var obs = Observable.of(12);
obs.map((value) => {
throw "blah";
}).catch((error) => {
if(error === "blah") {
throw "baz";
} else {
return Observable.of("Hello");
}
}).subscribe((value) => {
console.log("GOOD: " + value);
}, (error) => {
console.log("ERR: " + error);
});
//Logs ERR: baz

Resources