Pass JSON string to function with angular2

Question

I want to be able to change the color between green and red when an ion-item is clicked.

The code below retrieves multiple names and colors from a JSON string and it works.

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

But the problem starts when I want to pass the data back to a function so I can use the PUT method to send the new data back to the API I got the JSON string from.

PostData(data) {
    var url = 'http://www.external.tld/page/'+data?.id;  // append the id to the url
    if (data?.color == 'red') {data?.color = 'green'};
    if (data?.color == 'green') {data?.color = 'red'};   // toggle color
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({ headers: headers });
    return this.http.put(url, JSON.stringify({"name": new String(data?.name), "color": new String(data?.color)}), options)
    .map(res => res.json());    // send name and toggled color
}

I am a noob with angular 2 so I have no idea what I am doing right and wrong.

Bonus: I also didn't get the PUT method to work yet (I even prefer to send the data (name and color) without JSON if possible).

Please,specify what the problem is. Also, data?.id isn't valid Typescript. — Estus Flask
– Estus Flask, Commented Dec 22, 2016 at 1:14
In the html i am using data?.color and data?.name to get the current index of all names and colors. I want to use that same data in the ts file, but I dont know how. — Jozzy91
– Jozzy91, Commented Dec 22, 2016 at 1:21
To say it easier: if I click the second item with the name test and color red. Then I want to retrieve only that name and color in the ts file, toggle the color to green and send the name and color with a working put function. — Jozzy91
– Jozzy91, Commented Dec 22, 2016 at 1:31

slaesh · Accepted Answer · 2016-12-23 09:27:47Z

2

First: You shouldn't name both variables of your *ngFor the same!

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

Second: ?. isn't valid Typescript, as @estus already mentioned. Yes, of course in your angular2 template its valid!

But in Typescript you have to check if its defined:

PostData(data) {
    if (!data) return; // its null or not defined.. get out of here .. !

    var url = 'http://www.external.tld/page/'+data.id;  // append the id to the url
    if (data.color == 'red') {data.color = 'green'};
    if (data.color == 'green') {data.color = 'red'};   // toggle color
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({ headers: headers });
    return this.http
       // USE x-www-form-urlenoded instead of JSON
       .put(url, `name=${new String(data.name)}&color=${new String(data.color)}`, options)
       .map(res => res.json());    // send name and toggled color
}

edited Dec 23, 2016 at 9:27

answered Dec 22, 2016 at 6:06

slaesh

17k6 gold badges53 silver badges54 bronze badges

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

5 Comments

Jozzy91 Over a year ago

Thank you so very much! This saved me a lot more brainpain!

Jozzy91 Over a year ago

Can you please help me with the bonus question? I can't make the http.put function to work (I want to send name and color to my api). I prefer it to do it without json. I got it to work in postman by setting the name and color in the body with application/x-www-form-urlencoded.

slaesh Over a year ago

You have to set the body of your put-request like this name=YOURNAME&color=YOURCOLOR. See my updated answer.

Jozzy91 Over a year ago

Thank you for your reply, but I still cannot send the data. Am I missing something? The link is correct, the content-type is correct, name and color are being sent as x-www-form-urlencoded. Why won't it work :( Even when I hardcode the data.

Jozzy91 Over a year ago

A slight thing I noticed in postman is that it not only sends x-www-form as a header, but it's also an option in the body tab, next to form-data, raw and binary. I have no clue how to deal with this info, hope you can help me out :)

Pezetter · Accepted Answer · 2016-12-22 03:40:08Z

0

Your for loop is incorrect. You bind to a data array, and let the value at each index equal the variable/letiable "data". My guess is, on click, your data variable is not the iterated value, but the entire array of data. Console log data from your PostData() method.

*ngFor="d of data" [style.backgroundColor]="data.color" (click)="PostData(data)"

answered Dec 22, 2016 at 3:40

Pezetter

2,8542 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

Pass JSON string to function with angular2

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related