Is there a way to change response type in post method (angular 5) AFTER receiving response?
The issue: when the response is okay I need responseType to be blob. If not - I need the json responseType.
I've done some googling around but was unable to find the answer that fully suit my situation.
Code sample (briefly):
// just simple method in service
export class MyService {
constructor(private http: HttpClient) {}
doSomething(data, fileName): Observable<any> {
return this.http.post('url', data, {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'),
params: new HttpParams().set('fileName', fileName),
responseType: 'blob'
})
}
}
// just classic method in component
export class MyComponent {
constructor(private myService: MyService) {}
this.myService.doSomething(this.data, this.file).subscribe(() => {
// here doing something useful
}, (error: HttpErrorResponse) => {
// handling the error
})
}
So, one more time, in that case everytime I get the response in blob and it's great if all is fine. But if I've got error I need response to be in json. And vice versa.
How can I set correct responseType in both situations?
Thanks in advance.
I believe you can do this:
this.http.post('url', data,
{
observe: 'response',
responseType: 'arraybuffer' ,
headers: new HttpHeaders().set('Accept', 'application/octet-stream; application/json'),
params: new HttpParams().set('fileName', '')
})
.pipe(
map(res => {
if (res.ok) {
const blob:Blob = new Blob([res.body], {type: 'application/octet-stream'});
return blob;
}
else {
var decodedString = String.fromCharCode.apply(null, new Uint8Array(res.body));
var obj = JSON.parse(decodedString);
return obj;
}
})
);
I have spring boot service which provides csv file as response.
How do we call this service from angular 5 typescript.
download of a file should happen depends on some input parameters so I will have post call with user clicks the export button.
below is the rest code in controller.
#Controller
public class MyController {
#RequestMapping(value = "/downLoadDataQueryCsv", method = RequestMethod.GET)
public ResponseEntity<Object> downLoadDataQueryCsv(Model model) throws IOException {
FileWriter fileWriter = null;
try {
DataQueryRequestParams dataQueryRequestParams = new DataQueryRequestParams();
dataQueryRequestParams.setMbuCategory("UKY");
// Result table.
List<OrderIdFinalRank> rankList = // call api to get data.
// construct headers
List<String> csvHeaders = constructDataQueryHeaders();
StringBuilder fileContent = new StringBuilder(String.join(",", csvHeaders));
fileContent.append("\n");
// construct file content from response
for(OrderIdFinalRank finalRank : rankList) {
fileContent.append(StringUtils.join(constructDataQueryRow(finalRank), ",")).append("\n");
}
String fileName = new String("DataQueryTab.csv");
fileWriter = new FileWriter(fileName);
fileWriter.write(fileContent.toString());
fileWriter.flush();
File file = new File(fileName);
InputStreamResource resource = new InputStreamResource(new FileInputStream(file));
HttpHeaders headers = new HttpHeaders();
headers.add("Content-Disposition", String.format("attachment; filename=\"%s\"", file.getName()));
headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
headers.add("Pragma", "no-cache");
headers.add("Expires", "0");
ResponseEntity<Object> responseEntity = ResponseEntity.ok().headers(headers).contentLength(file.length())
.contentType(MediaType.parseMediaType("application/txt")).body(resource);
return responseEntity;
} catch (Exception e) {
System.out.println("Exception: " +e);
return new ResponseEntity<>("Error occurred", HttpStatus.INTERNAL_SERVER_ERROR);
} finally {
if(null != fileWriter) {
fileWriter.close();
}
}
}
}
Now I need to call this from UI when I click export button, what have written is below.
I have read file saver and added below code, but its not working. kindly help me.
#Injectable()
export class ApiService {
onExport(dataQueryRequestParams: any) {
const dataQueryURL = API_URL + '/downLoadDataQueryCsv';
const body = JSON.stringify(dataQueryRequestParams);
this._http.get(dataQueryURL).subscribe(res => {
saveAs(res, 'data.csv');
});
}
}
Note: When I ran rest URL from browser the file is downloaded, but the same needs to happen when I click export button.
Am new to UI technologies.
Thanks
I have fixed problem with below code.
export class ApiService {
onExport(requestParams: any): Observable<any> {
const dataQueryURL = API_URL + '/downLoadDataQueryCsv';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'Application/json; charset=UTF-8'
}),
responseType: 'text' as 'text'
};
const body = JSON.stringify(requestParams);
return this._http.post(dataQueryURL, body, httpOptions);
}
}
added below in caller Component class.
export class Component implements OnInit {
onExport() { this._apiService.onExport(this.dataQueryForm.value).subscribe(data => {
const blob1 = new Blob([data], { type: 'text/csv' });
FileSaver.saveAs(blob1, 'data.csv');
}) ;
}
}
Thank you all for your responses !
I have response object i just assigned to "this" object.
private data: Object = {};
this.http.post('url', { })
.subscribe(
res => {
console.log(res);
this.data = res;
if(this.data.datacentersinfo.length) {}
...
If I access datacentersinfo object it saying property datacentersinfo does not exist on type Object. Because of this error, I am not able to generate the dist folder.
You have several solutions :
1 - type your data to any and don't instanciate it :
private data: any;
2 - change your condition :
if(this.data && this.data.datacentersinfo && this.data.datacentersinfo.length) {}
This should resolve your issue.
i suggest you make use of strongly type object and do as below
import { Injectable } from '#angular/core';
import { Http, Headers, RequestOptions,
Response, ResponseContentType } from '#angular/http';
GetAllCriteria(): Observable<Array<ClassName>> {
let headers = new Headers({
'Content-Type': 'application/json'
});
let options = new RequestOptions({ headers: headers });
return this._http.get(this.apiUrl + "/GetAllCriteria",
options).subscribe(response => response.json());
}
I'll post both ways to do this. First the old way (which looks like how you're trying to do it), then the preferred way using HTTP Client
Old HTTP
private data: Object = {};
this.http.post('url', { })
.map((res: Response) => res.json())
.subscribe((res:any) => {
console.log(res);
this.data = res;
if(this.data.datacentersinfo.length) {}
});
HTTP Client
private data: Object = {};
this.http.post<any>('url', { })
.subscribe((res:any) => {
console.log(res);
this.data = res;
if(this.data.datacentersinfo.length) {}
});
I'm not doing this the best way it should be done, you should create a service component that handles the HTTP request, then call that service from the component and subscribe to it's response there.
I have a project that needs to use Angular2 (final) to post to an old, legacy Tomcat 7 server providing a somewhat REST-ish API using .jsp pages.
This worked fine when the project was just a simple JQuery app performing AJAX requests. However, the scope of the project has grown such that it will need to be rewritten using a more modern framework. Angular2 looks fantastic for the job, with one exception: It refuses to perform POST requests using anything option but as form-data, which the API doesn't extract. The API expects everything to be urlencoded, relying on Java's request.getParameter("param") syntax to extract individual fields.
This is a snipped from my user.service.ts:
import { Injectable } from '#angular/core';
import { Headers, Response, Http, RequestOptions } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
#Injectable()
export class UserService {
private loggedIn = false;
private loginUrl = 'http://localhost:8080/mpadmin/api/login.jsp';
private headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
constructor(private http: Http) {}
login(username, password) {
return this.http.post(this.loginUrl, {'username': username, 'password': password}, this.headers)
.map((response: Response) => {
let user = response.json();
if (user) {
localStorage.setItem('currentUser', JSON.stringify(user));
}
}
);
}
}
No matter what I set the header content type to be, it always ends up arriving as non-encoded form-data. It's not honoring the header I'm setting.
Has anyone else encountered this? How do you go about forcing Angular2 to POST data in a format that can be read by an old Java API using request.getParameter("param")?
For Angular > 4.3 (New HTTPClient) use the following:
let body = new URLSearchParams();
body.set('user', username);
body.set('password', password);
let options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
this.http
.post('//yourUrl.com/login', body.toString(), options)
.subscribe(response => {
//...
});
Note 3 things to make it work as expected:
Use URLSearchParams for your body
Convert body to string
Set the header's content-type
Attention: Older browsers do need a polyfill! I used: npm i url-search-params-polyfill --save and then added to polyfills.ts: import 'url-search-params-polyfill';
UPDATE June 2020: This answer is 4 years old and no longer valid due to API changes in Angular. Please refer to more recent answers for the current version approach.
You can do this using URLSearchParams as the body of the request and angular will automatically set the content type to application/x-www-form-urlencoded and encode the body properly.
let body = new URLSearchParams();
body.set('username', username);
body.set('password', password);
this.http.post(this.loginUrl, body).map(...);
The reason it's not currently working for you is you're not encoding the body data in the correct format and you're not setting the header options correctly.
You need to encode the body like this:
let body = `username=${username}&password=${password}`;
You need to set the header options like this:
this.http.post(this.loginUrl, body, { headers: headers }).map(...);
For those still looking for an answer this is how I solved it with Angular 5 and HttpClient:
const formData = new FormData();
// append your data
formData.append('myKey1', 'some value 1');
formData.append('myKey1', 'some value 2');
formData.append('myKey3', true);
this.httpClient.post('apiPath', formData);
Do NOT set Content-Type header, angular will fix this for you!
This is what worked for me with Angular 7:
const payload = new HttpParams()
.set('username', username)
.set('password', password);
this.http.post(url, payload);
No need to explicitly set the header with this approach.
Note that the HttpParams object is immutable. So doing something like the following won't work, it will give you an empty body:
const payload = new HttpParams();
payload.set('username', username);
payload.set('password', password);
this.http.post(url, payload);
When using angular forms most parameters will be sent as objects, hence your login function will most likely have this object
form.value = {username: 'someone', password:'1234', grant_type: 'password'} as the parameter
to send this object as x-www-form-urlencoded your code will be
export class AuthService {
private headers = new HttpHeaders(
{
'Content-Type': 'application/x-www-form-urlencoded',
Accept: '*/*',
}
);
constructor(private http: HttpClient) { }
login(data): Observable<any> {
const body = new HttpParams({fromObject: data});
const options = { headers: this.headers};
return this.http.post(`${environment.baseUrl}/token`, body.toString(), options);
}
Angular 9
This is a code that works.
Take other options that fit to you to return not success answer.
let params = new HttpParams({
fromObject: { email: usuario.email, password: usuario.password, role: usuario.role },
});
let httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }),
};
return this.http.post(`${this.url}/usuario/signup`, params.toString(), httpOptions).pipe(
map(
(resp) => {
console.log('return http', resp);
return resp;
},
(error) => {
console.log('return http error', error);
return error;
}
)
);
remember from string you use fromString and not fromObject.
I found out this solution after working several hours on this issue
login(userName: string, password: string) {
const headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append( 'No-Auth', 'True');
const body = new URLSearchParams();
body.set('username', userName);
body.set('password', password);
body.set('grant_type', 'password');
return this.http.post(
this.baseUrl + '/token'
, body.toString()
, { headers: headers }
)
.pipe(map(res => res.json()))
.pipe(map(res => {
localStorage.setItem('auth_token', res.auth_token);
return true;
}))
.pipe(catchError((error: any) => {
return Observable.throw(error);
}));
}
For Angular 12, this is what worked for me.
options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
params = new HttpParams()
.set("client_id", "client_id")
.set("client_secret", "client_secret")
.set("grant_type", "grant_type")
.set("scope", "scope")
getToken(){
return this._http.post(`${URL}`, this.params, this.options)
}
Also, remember to import the following at the top import { HttpClient, HttpHeaders, HttpParams } from '#angular/common/http';
Also notice that, unlike the others, we do not use toString() as it's redundant.
Guys I've been working on this since a while and thanks to this post from Josh Morony https://www.joshmorony.com/integrating-an-ionic-application-with-a-nodejs-backend/ I figured out what the problem was. Basically, when I started testing my api I was using POSTMAN and it was working perfectly but when it came to implementing it with Ionic Angular it became a problem. The solution in this post is only about importing body-parser and use it as app middleware like this app.use(bodyParser.json()) on your server-side root file(index).
Hopefully, this will help, Thanks!
Angular 8
const headers = new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded'
});
const params = new HttpParams();
params.set('username', 'username');
params.set('password', 'password');
this.http.post(
'https://localhost:5000/api',
params.toString(),
{ headers }
);
export class MaintenanceService {
constructor(private http: HttpClient) { }
//header de requete http
private headers = new HttpHeaders(
{ 'Content-Type': 'application/x-www-form-urlencoded' }
);
// requete http pour recuperer le type des maintenances
createMaintenance(data: createMaintenance){
const options = { headers: this.headers};
return this.http.post('api/v2/admin/maintenances', data, options ).subscribe(status=> console.log(JSON.stringify(status)));
}
let options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
let body = new URLSearchParams();
body.set('userId', userId);
body.set('discussionId', discussionId);
I am using angular 2 to make a get request and a post request. My get request works fine, but for my post, I do not see the request is made when checking my Firebug Net panel.
The code methods look like follows. I also have subscribe methods invoking them from a component class.
import {Injectable} from "angular2/core";
import {Http, Response, Headers, RequestOptions, Jsonp, URLSearchParams} from "angular2/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
#Injectable()
export class MyService{
constructor (private _http: Http){}
testPost(){
var json = JSON.stringify({"userId": 111, "givenName": "CZ"});
var body = "json="+json;
var headers = new Headers({ 'Content-Type': 'application/json' });
var options = new RequestOptions({ headers: headers });
return this._http.post("http://mylocal.post.url", body, options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
alert("test whether this method is reached");
let body = res.json();
return body.data || { };
}
private handleError (error: any) {
alert("test whether this method is reached");
let errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
//testGet method is running well
testGet(link:string){
return this._http.get(link)
.map(res => res);
}
}
my subscribing method onTestPost(), which is assigned to a button on the page.
onTestPost(){
this.myService.testPost()
.subscribe(
data => this.getData = JSON.stringify(data),
error => alert(error),
() => console.log("Finished")
);
}
I put an alert statement at the beginning of two helper methods. None of the alerts is reached. And I don't see any request called to the my local post url when debugging with Firebug.
While my testGet method works correctly, I just don't know what is missing for the testPost.
I think your subscribe methods are the issue here. Please make sure subscribe is called.
"This observable is cold which means the request won't go out until
something subscribes to the observable."
See https://angular.io/docs/ts/latest/guide/server-communication.html
testPost() : Observable <Response> //import{Response} from '#angular/http'
{
var json = JSON.stringify({"userId": 111, "givenName": "CZ"});
var headers = new Headers({ 'Content-Type': 'application/json' });
var options = new RequestOptions({ headers: headers });
return this._http.post("http://mylocal.post.url/api",JSON.stringify(json), options)
.map((res:Response)=>res.json())
.catch(this.handleError);
}