html - Displaying data from API in a table using Angular

Question

I am trying to display data I am fetching from API in a certain way. I want to display fullName, balance, isActive, registered, state and country. I want to display data based on users. So, one user - one line. Can this be done? I displayed data, but it looks ugly because it displays users based on country. One country - one row and all users from that country are in a single cell. I will place the code I got bellow. This is link to the API: https://fww-demo.herokuapp.com/ I also need to be able to filter it for all columns and sort it in asc or desc order. Pagination is a bonus. Displaying is most important for me right now. I am not allowed to use any npm library, meaning I have to do it all manually.

This is my HTML, or should I say, template for users component

<table>
<thead>
    <th>Country</th>
    <th>State</th>
    <th>Full name</th>
    <th>Balance</th>
    <th>Is Active</th>
    <th>Registered</th>
</thead>
<tbody>
    <tr *ngFor="let user of users; let i = index;">
         <td >
           {{ user.country }}
        </td>
        <td >
            <p *ngFor="let state of user.state">
                {{ state.name }}
            </p>
        </td> 
         <td> 
            <div *ngFor="let state of user.state">
                <p *ngFor="let userName of state.users">
                    {{ userName.fullName }}
                </p>
            </div>
        </td> 
        <td>
            <div *ngFor="let state of user.state">
                <p *ngFor="let bal of state.users">
                    {{ bal.balance }}
                </p>
            </div>
        </td>
        <td>
            <div *ngFor="let status of user.state">
                <p *ngFor="let active of status.users">
                    {{ active.isActive }}
                </p>    
            </div>
        </td>
        <td>
            <div *ngFor="let register of user.state">
                <p *ngFor="let isReg of register.users">
                    {{ isReg.registered }}
                </p>
            </div>
        </td>
    </tr>
</tbody>

This is typescript for users component.

import { Component, OnInit } from '@angular/core';
import { User } from '../model/user';
import { UserService } from '../user.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

  users: User[] = [];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.userService.getAll().subscribe(result => {
      this.users = result;
      console.log(this.users);
    });
  }

}

This is users service.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private urlGetUser: string = 'https://fww-demo.herokuapp.com/';
  
  constructor(public http: HttpClient) { }

  getAll() {
    return this.http.get<any>(this.urlGetUser);
  }
}

question from:https://stackoverflow.com/questions/65901173/displaying-data-from-api-in-a-table-using-angular

Answer 1

Waitting for answers