PUT request with angular2 in ionic2

Question

I need help making a clickable list which toggles color on click. I already know how to read data from an external site, but now I want to PUT data to that site. I've already got it to work with postman.

http://www.external.tld/page/{id}
name = test
color = toggle

So I already got JSON data like this:

{"id":"6","name":"test1","color":"red"},
{"id":"7","name":"test2","color":"red"}

This is the current html code which retrieves the data:

<ion-item *ngFor="let data of data" [style.backgroundColor]="data?.color" (click)="PostData(data?.id)">
  {{data?.name}}
</ion-item>

So now I need to have a working PostData function which uses the PUT method to toggle the color between red and green and send it to a page like above.

So for example if I click on the list with id: 6, name: test1 and color: red this should be outPUTted:

http://www.external.tld/page/6
name = test1
color = green

The code I got so far which doesn't work:

PostData(data:any) {
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });
    return this.http.post('http://www.external.tld/page/'+data, JSON.stringify(data), options)
        .map((res: Response) => res.json());
}

Well I am pretty sure it is a put, because the post version with postman doesn't work. And I am using laravel's update controller, which works only if it receives put. — Jozzy91
– Jozzy91, Commented Dec 19, 2016 at 21:49
Oh hahaha my mistake! Thanks! I was to lazy to edit it correctly since I am trying different stuff for hours ^^ — Jozzy91
– Jozzy91, Commented Dec 19, 2016 at 21:51

Stefan Svrkota · Accepted Answer · 2016-12-19 21:38:21Z

1

You need to subscribe when you work with Observables because they are lazy:

PostData(data:any) {
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });
    return this.http.post('http://www.external.tld/page/'+data, JSON.stringify(data), options)
        .map((res: Response) => res.json())
        .subscribe(
        res => {
            console.log(res); // this should print server's response after you post data
        },
        error => {
            console.log(error); // this will print error if it occurs
        });
}

answered Dec 19, 2016 at 21:38

Stefan Svrkota

50.8k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jozzy91 Over a year ago

Thanks for your reply, can you also help me a little bit out making this work, since it's not appending the id in the link and also not sending the name and color like I want.

Jozzy91 Over a year ago

Could i do somrthing like: return this.http.post('external.tld/page/'+data?.id, JSON.stringify(data), options) .map((res: Response) => res.json()).subscribe (....); note the data?.id which works in the html. And how would I send the name and color? Because im not sure if my api can read the json data and extracts what it needs like name and color.

Collectives™ on Stack Overflow

PUT request with angular2 in ionic2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related