CODEWITHSUNDEEP
angulartypescript
user17183054
user17183054

Reputation:

Display Post response data to template angular

Usually we call get request to display the data to client side. Is there any way to display the response that we get when we perform post request ?

Process: The user from client side post word and on the basis of word that is posted the post give response response as follows:

>0:{username:'patrick',userid:'3636363',position:'manager'}
>1:{username:'patrick1',userid:'3636364',position:'employee'}
>2:{username:'patrick2',userid:'3636365',position:'employee'}

I have used following way to post data My html:

<form #search="ngForm" (ngSubmit)="onSubmit(search.value)">
<input type="text" name ="name" ngModel placeholder="name">
<button type="submit"> Search</button>
</form>

my component.ts

export class HomeComponent{
url='https://localhost:7292/api/';

constructor (private http:HttpClient){}

  onSubmit(data:string){
this.http.post(this.Url+'Employee?name='data.name,data).subscribe((result)=>{
   console.log(result)
  })
}
In console for result it shows:
>0:{username:'patrick',userid:'3636363',position:'manager'}
>1:{username:'patrick1',userid:'3636364',position:'employee'}
>2:{username:'patrick2',userid:'3636365',position:'employee'}

So I want to display username,userid,position to the template. How do i display the post response ?

Upvotes: 0

Views: 992

Answers (2)

Jeyson Mg
Jeyson Mg

Reputation: 160

You just need to store the response in a public or private class member like this:

export class HomeComponent{
constructor(){}

public result: string = '';

onSubmit(data:string){
this.http.post(this.Url+'Employee?name='data.name,data).subscribe((rslt:string)=>{
   this.result = rslt;
  })

}

and then in the template (HTML) you can access this property like this:

<div>{{result}}</div> /* Here you can see your result public variable of type string */

Upvotes: 1

d0rf47
d0rf47

Reputation: 499

I think the optimal solution for this would be to create an object with the properties you will be displaying from the response, (userName, userId, position); When your post request returns, create the object with the values or set the object properties with said values (once validated) if already constructed. You can then use the object properties and angular's interpolation syntax to display the values to the user. You can also conditionally render the sections with ngIf directive and only display the values when they are set to something other than null/default values/safestate.

Edit. Also you should add a error catch to your http request to handle non success responses. You can add an error msg display here

Upvotes: 0

Related Questions