Display backend response in Angular HTML

Question

I am writing a form in Angular. Functionality is when I enter something in that form it posts that on back-end server and returns a response. I can see output in the console. I want to display that in HTML. I tried calling submitForm().

form: FormGroup;

constructor(
  public fb: FormBuilder,
  private http: HttpClient
) {
  this.form = this.fb.group({
    inputText: ['']
  })
}

ngOnInit() {}

submitForm() {
  var formData: any = new FormData();
  formData.append("inputText", this.form.get('inputText').value)

  this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe(
    (response) => console.log(response),
    (error) => console.log(error)
  )
}

<div class="container sentiment" style="margin-top: 30px;">
  <div class="row">
    <div class="card col-md-6">
      <div class="card-body">
        <form [formGroup]="form" (ngSubmit)="submitForm()">
          <div class="form-group">
            <h2 class="card-title">Enter Your text</h2>
            <textarea class="form-control" formControlName="name" cols="30" rows="10" placeholder="Enter text" style="width: 100%;"></textarea>
          </div>
          <div class="form-group">
            <button class="btn btn-danger btn-block btn-lg">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="card col-md-6">
  <div class="card-body">
    <h2 class="card-title">Output:</h2>
    <div *ngFor="let data of submitForm()">
      {{data.response}}
    </div>
  </div>
</div>

Could you elaborate the requirement please? Also try to add the output you got in console. — Jins Thomas Shaji
– Jins Thomas Shaji, Commented May 20, 2020 at 18:26

Anurag · Accepted Answer · 2020-05-20 19:29:34Z

2

If you want to see response data directly without any formatting.

Simply use JSON pipe {{ responseData | json }}

You need to assign response to any variable in your controller

responseData: any;
submitForm() {
  var formData: any = new FormData();
  formData.append("inputText", this.form.get('inputText').value)

  this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe(
    (response) => { this.responseData = response },       // <-- assign the value here
    (error) => { console.log(error) }
  );
}

Then in your template bind your variable using JSONpipe

<div class="card col-md-6">
  <div class="card-body">
    <h2 class="card-title">Output:</h2>
    <div>
      {{responseData | json }}
    </div>
  </div>
</div

answered May 20, 2020 at 19:29

Anurag

3072 silver badges15 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2020-05-20 18:32:44Z

0

You are calling method submitForm() in *ngFor and it is not returning anything. Instead you could declare a variable and assign the repsonse

data : any;

this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe((response) => 
    this.data = response,
    (error) => console.log(error)
)

and change your HTML as

<div class="card-body">
    <h2 class="card-title">Output:</h2>
    <div *ngFor="let data of data">
      {{data.response}}
    </div>
  </div>

answered May 20, 2020 at 18:32

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

Manish · Accepted Answer · 2020-05-20 18:34:39Z

You can have a variable where in you can set the received response.

form: FormGroup;
result: any[];
constructor(
  public fb: FormBuilder,
  private http: HttpClient
) {
  this.form = this.fb.group({
    inputText: ['']
  })
}

ngOnInit() {}

submitForm() {
  var formData: any = new FormData();
  formData.append("inputText", this.form.get('inputText').value)

  this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe(
    (response) => { this.result = response; },
    (error) => console.log(error)
  )
}

Bind the variable in the html to display the contents:

<div class="card col-md-6">
  <div class="card-body">
    <h2 class="card-title">Output:</h2>
    <div *ngFor="let data of results">
      {{data.id}} - {{data.name}}
    </div>
  </div>
</div>

Example: If your returned data is something like this:

[
{ id: 1, name: "XXX"},
{ id: 2, name: "YYY"},
]

The output would be:

1 - XXX
2 - YYY

Barremian · Accepted Answer · 2020-05-20 18:48:02Z

As a rule of thumb, try to refrain from calling functions from template expressions like *ngFor="let data of submitForm(), *ngIf="submitForm()" and {{ submitForm() }}. They will usually be invoked multiple times than it appears.

Granted we could solve this behavior by changing the change detection strategy, but that'd be a solution to a problem that could be easily solver otherwise.

In your case, you could assign the HTTP response in a local variable and loop over it in the template. Try the following

Controller

form: FormGroup;
responseData: any = [];        // <-- define a variable and assign an empty array

constructor(
  public fb: FormBuilder,
  private http: HttpClient
) {
  this.form = this.fb.group({
    inputText: ['']
  })
}

ngOnInit() {}

submitForm() {
  var formData: any = new FormData();
  formData.append("inputText", this.form.get('inputText').value)

  this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe(
    (response) => { this.responseData = response },       // <-- assign the value here
    (error) => { console.log(error) }
  );
}

Template

<ng-container *ngIf="responseData.length > 1">
  <div class="card col-md-6">
    <div class="card-body">
      <h2 class="card-title">Output:</h2>
      <div *ngFor="let data of responseData">
        {{data?.response}}
      </div>
    </div>
  </div>
</ng-container>

Collectives™ on Stack Overflow

Display backend response in Angular HTML

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related