How to take JSON objects one by one from response object and display in table in Angular?

Question

The JSON Array get into typescript as response Object from my Java application. I need to pick each object and display into html page corresponding to that typescript page in angular.
list-user.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-list-user',
  templateUrl: './list-user.component.html',
  styleUrls: ['./list-user.component.css']
})
export class ListUserComponent implements OnInit {
  loginForm!: FormGroup;
  submitted = false;
  jdbc: any;
  username:any

  constructor(private http: HttpClient, private router: Router) { }

  ngOnInit() {
    this.username = JSON.parse(localStorage.getItem("session") || "");
    let listuser: any = {
      username: this.username,
    }
    this.http.post('http://localhost:8080/demoprojectjava/list-user/',
      listuser, { observe: 'response' }).subscribe(res => {
          console.log(res);
  });
  }
}

list-user.component.html

<div>
    <h1 class="listuser"> Display Data from Json File </h1>
    <table>
        <thead>
        <tr>
            <th>User Id</th>
            <th>Lastname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{--Here I need value from Json array}}</td>
            <td>{{--Here I need value from Json array}}</td>
        </tr>
    </tbody>  
    </table>
</div>

When I run my code, in console I got the output as a result for console.log(res); as :

{"user_data":[{"user_id":"111","username":"Hridya"},{"user_id":"222","username":"Rizz"}]}

Philipp Meissner · Accepted Answer · 2022-11-25 08:00:46Z

1

Store the http request as Observable in a property (here userData$). Then use the async pipe in your template to have angular automatically subscribe to it. Then use ngFor to iterate over all the elements inside the response and display the data accordingly.

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

type ResponseTypeFromYourBackend = any;

@Component({
  selector: 'app-list-user',
  templateUrl: './list-user.component.html',
  styleUrls: ['./list-user.component.css']
})
export class ListUserComponent implements OnInit {
  loginForm!: FormGroup;
  submitted = false;
  jdbc: any;
  username:any
  userData$: Observable<ResponseTypeFromYourBackend>;

  constructor(private http: HttpClient, private router: Router) { }

  ngOnInit() {
    this.username = JSON.parse(localStorage.getItem("session") || "");
    let listuser: any = {
      username: this.username,
    }
    this.userData$ = this.http.post('http://localhost:8080/demoprojectjava/list-user/',
      listuser,
      { observe: 'response' }
    );
  }
}


<div>
  <h1 class="listuser"> Display Data from Json File </h1>
  <table *ngIf="userData$ | async as data">
    <thead>
    <tr>
      <th>User Id</th>
      <th>Lastname</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of data.user_data">
      <td>{{ user.user_id}}</td>
      <td>{{ user.username}}</td>
    </tr>
    </tbody>
  </table>
</div>

answered Nov 25, 2022 at 8:00

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

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

2 Comments

Fabian Strathaus Over a year ago

Wow, astonishing how similar our answers are :D Guess this can really be seen as a best practice then :D

Philipp Meissner Over a year ago

Yes, I really like that you re-mapped user_data outside the template already. Good job :)

Fabian Strathaus · Accepted Answer · 2022-11-25 08:01:41Z

1

The best way to do this would be to do the following:

Define an observable on class level:

userData$: Observable<YourType>;
...
ngOnInit() {
   ...
   this.userData$ = this.http.post('http://localhost:8080/demoprojectjava/list-user/',
      listuser).pipe(map(item => item.user_data));
  }

Subscribe to this observable using async pipe and iterate over the array:

<tr *ngFor="let item of userData$ | async">
  <td>{{item.user_id}}</td>
  <td>{{item.username}}</td>
</tr>

answered Nov 25, 2022 at 8:01

Fabian Strathaus

3,6401 gold badge8 silver badges30 bronze badges

Comments

Vishnu Prabhu · Accepted Answer · 2022-11-25 08:44:18Z

1

Create a variable to store the response and use ngFor to loop through the array.

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-upload-active-census',
  templateUrl: './upload-active-census.component.html',
  styleUrls: ['./upload-active-census.component.css'],
})
export class UploadActiveCensusComponent implements OnInit {
  loginForm!: FormGroup;
  submitted = false;
  jdbc: any;
  username: any;
  data: any;

  constructor(private http: HttpClient, private router: Router) {}

  ngOnInit() {
    this.username = JSON.parse(localStorage.getItem('session') || '');
    let listuser: any = {
      username: this.username,
    };
    this.http
      .post('http://localhost:8080/demoprojectjava/list-user/', listuser, {
        observe: 'response',
      })
      .subscribe((res) => {
        console.log(res);
        return this.data = res;
      });
  }
}

<div>
    <h1 class="listuser"> Display Data from Json File </h1>
    <table>
        <thead>
            <tr>
                <th>User Id</th>
                <th>Lastname</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of data?.user_data">
                <td>{{item.user_id}}</td>
                <td>{{item.username}}</td>
            </tr>
        </tbody>
    </table>
</div>

edited Nov 25, 2022 at 8:44

answered Nov 25, 2022 at 8:06

Vishnu Prabhu

1295 bronze badges

2 Comments

Philipp Meissner Over a year ago

This will cause a runtime error the moment data.user_data gets evaluated before the request was finished.

Hridyadas V D Over a year ago

@Vishnu Prabhu. Your Typescript code worked smoothly... But I didn't got value with your html code and made a small change as <tr *ngFor="let user of data.body.user_data"> . Then I got the values in table

Hridyadas V D · Accepted Answer · 2022-11-29 08:24:55Z

@Vishnu Prabhu. Thanks for the answer.
Your Typescript code worked smoothly... But I didn't get value with your html code and made a small change. Then I got the values in the table. So I'm posting the entire code that worked well for me, to anyone else for future reference.
list-user.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-list-user',
  templateUrl: './list-user.component.html',
  styleUrls: ['./list-user.component.css']
})
export class ListUserComponent implements OnInit {
  loginForm!: FormGroup;
  submitted = false;
  jdbc: any;
  username: any;
  data: any;

  constructor(private http: HttpClient, private router: Router) { }

  ngOnInit(): void {
    this.username = JSON.parse(localStorage.getItem("session") || "");
    let listuser: any = {
      username: this.username
    }

    this.http.post('http://localhost:8080/demoprojectjava/list-user/',
      listuser, { observe: 'response' }).subscribe(res => {
        console.log(res.body);
        return this.data = res;
      },
      );
  }
}

list-user.component.html

<div>
    <h1 class="listuser"> Display Data from Json File</h1>
    <table>
        <thead>
            <tr>
                <th>User Id</th>
                <th>Lastname</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of data.body.user_data">
                <td>{{user.user_id}}</td>
                <td>{{user.username}}</td>
            </tr>
        </tbody>
    </table>
</div>

Collectives™ on Stack Overflow

How to take JSON objects one by one from response object and display in table in Angular?

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related