retrieve data in angular with specific list - asp.net-web-api

Question

I need to get family list of user
my Api get this
this is the data we get
{
"id": 16,
"username": "omar",
"gender": "male",
"age": 39,
"knownAs": "Omar Talaat",
"created": "2017-07-11T00:00:00",
"lastActive": "2020-02-19T16:51:50.0251608",
"phoneNumber": null,
"mobileNumber": "0114006884",
"city": "October city ",
"country": "Egypt",
"photoUrl": "http://res.cloudinary.com/drm7h8ge0/image/upload/v1577009358/wk0k06fkbbkt0vbnjvic.jpg",
"photos": [
{
"id": 9,
"url": ,
"description": null,
"dateAdded": "2019-12-22T12:09:16.9949907",
"isMain": true
},
{
"id": 1007,
"url":,
"description": null,
"dateAdded": "2019-12-26T01:26:48.8852864",
"isMain": false
}
],
"families": [
{
"id": 1028,
"familyName": "Othman",
"father": {
"id": 1028,
"firstName": "Omar Talaat",
"lastName": "Othman",
"job": " pharmasict",
"mobileNumber": 1254879,
"emailAdress": "domar#yahoo.com",
"isExest": true
},
"mother": {
"id": 1028,
"firstName": "marium",
"lastName": "Abd Rabo ",
"job": "Doctor",
"mobileNumber": 1254879,
"emailAdress": "maruim#htomail",
"isExest": true
},
"addresses": [
{
"addressName": "1 kdsk kjhduu",
"city": " october city",
"country": "Egypt"
}
]
},
{
"id": 1029,
"familyName": "update-talaat",
"father": {
"id": 1029,
"firstName": "omar",
"lastName": "talaat",
"job": "update-farmacist",
"mobileNumber": 21547,
"emailAdress": "omar#gmail.com",
"isExest": false
},
"mother": {
"id": 1029,
"firstName": "marium",
"lastName": "gonzales",
"job": "update-doctor",
"mobileNumber": 13654,
"emailAdress": "mariumgonzales#hotmail.com",
"isExest": true
},
"addresses": [
{
"addressName": "1,update- mohamed streest ",
"city": "giza",
"country": "egypt"
}
]
}
]
}
interface for user:-
import { Photo } from './photo';
import { Family } from './family';
export interface User {
id: number;
num: number;
username: string;
knownAs: string;
age: number;
gender: string;
created: Date;
lastActive: Date;
photoUrl: string;
city: string;
country: string;
emailAdress: string;
phoneNumber: string;
mobileNumber: string;
photos?: Photo[];
family?: Family[];
}
family interface:-
import { Address } from './address';
import { Father } from './father';
import { Mother } from './mother';
export interface Family {
id: number;
familyName: string;
father: Father;
mother: Mother;
addresses: Address[];
}
and my user service like that:
baseUrl = environment.apiUrl;
users: User[];
constructor( private http: HttpClient , private authService: AuthService) { }
getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.baseUrl + 'users' );
}
getUser(id: number): Observable<User> {
return this.http.get<User>(this.baseUrl + 'users/' + id);
}
getFamilies(): Observable<Family[]> {
return this.http.get<Family[]>(this.baseUrl + 'users/' + this.authService.decodedToken.nameid + '/families' );
}
getFamily( id): Observable<Family> {
return this.http.get<Family>(this.baseUrl + 'users/' + this.authService.decodedToken.nameid + '/families/' + id);
}
this is MemberDetailsResolver :-
import { Injectable } from '#angular/core';
import { Resolve, ActivatedRouteSnapshot, Router } from '#angular/router';
import { User } from '../_models/user';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { UserService } from '../_service/user.service';
import { AlertifyService } from '../_service/alertify.service';
import { AuthService } from '../_service/auth.service';
#Injectable(
)
export class MemberDetailsResolver implements Resolve<User> {
constructor(private userService: UserService, private router: Router,
private alertify: AlertifyService , private authService: AuthService) {}
resolve(route: ActivatedRouteSnapshot): Observable<User> {
return this.userService.getUser(this.authService.decodedToken.nameid).pipe(
catchError(error => {
this.alertify.error('Proplem retriving data');
this.router.navigate(['/CampList']);
return of(null);
})
);
}
}
this my member family card component:-
import { Component, OnInit, Input } from '#angular/core';
import { Family } from 'src/app/_models/family';
import { User } from 'src/app/_models/user';
#Component({
selector: 'app-member-family-card',
templateUrl: './member-family-card.component.html',
styleUrls: ['./member-family-card.component.css']
})
export class MemberFamilyCardComponent implements OnInit {
#Input() family: Family[];
constructor() { }
ngOnInit() {
}
}
member family card html:-
<div *ngFor="let family of family">
<div class="card mb-4"style="max-width: 202px;" >
<!-- Image -->
<div class="car-img-wrapper">
<img class="card-img-top" src="{{'../../../assets/img/person-placeholder.jpg'}}">
<ul class="list-inline member-icons animate text-center">
<li class="list-inline-item"><button class="btn btn-primary" [routerLink]="['/family/',family.id]" ><i class="fa fa-user"></i></button></li>
<!--
<li class="list-inline-item"><button class="btn btn-primary"
[routerLink]="['/members/',family.id]" [queryParams]="{tab : 3}" ><i class="fa fa-envelope"></i></button></li>
-->
</ul>
</div>
<div class="card-body p-1">
<h5 class="card-title text-center mb-1"><i class="fa fa-user"></i><strong>Family Name: </strong>{{family.familyName}}</h5>
</div>
</div>
</div>
this member details:-
import { Component, OnInit, Input, ViewChild } from '#angular/core';
import { User } from 'src/app/_models/user';
import { FakeMissingTranslationHandler } from '#ngx-translate/core';
import { Family } from 'src/app/_models/family';
import { TabsetComponent } from 'ngx-bootstrap';
import { ActivatedRoute } from '#angular/router';
import { UserService } from 'src/app/_service/user.service';
import { AlertifyService } from 'src/app/_service/alertify.service';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
#Component({
selector: 'app-member-details',
templateUrl: './member-details.component.html',
styleUrls: ['./member-details.component.css']
})
export class MemberDetailsComponent implements OnInit {
#ViewChild('memberTabs', {static: true}) memberTabs: TabsetComponent;
user: User;
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
constructor(private userService: UserService, private alertify: AlertifyService, private route: ActivatedRoute) { }
ngOnInit() {
this.route.data.subscribe(data => {
this.user = data.user;
});
this.route.queryParams.subscribe(params => {
const selectTab = params.tab;
this.memberTabs.tabs[selectTab > 0 ? selectTab : 0].active = true;
});
this.galleryOptions = [
{
width: '500px',
height: '500px',
imagePercent: 100,
thumbnailsColumns: 4,
imageAnimation: NgxGalleryAnimation.Slide,
preview: false
}
];
this.galleryImages = this.user.photos.map(photo => ({
small: photo.url,
medium: photo.url,
big: photo.url,
description: photo.description
})
);
}
selectTab(tabId: number) {
this.memberTabs.tabs[tabId].active = true;
}
}
this is member details html
<div class="container-fluid mt-4">
<div >
<h1> your Profile </h1>
<div class="row">
<div class="col-sm-4">
<app-member-card [user]="user"></app-member-card>
</div>
<div class="col-sm-8">
<div class="tab-panel">
<tabset class="member-tabset" #memberTabs>
<tab heading="My Detailes">
</tab>
<tab heading=" My Photos" >
<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
</tab>
<tab heading="family">
<h4>Family detailes</h4>
<app-member-family-card [family]="user.family"></app-member-family-card>
</tab>
<tab heading="My Child">
<h4>my Child</h4>
</tab>
</tabset>
</div>
</div>
</div>
</div>
</div>
I want to display the family for user