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

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"}]}

@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>