How to display a multiple object in the view


I have this json that contains another one inside

import { AnimalClass } from ‘./animal’;
export class UserClass {

email: string;
displayName: string;
animal: AnimalClass[];
constructor(email: string , displayName: string){ = email
    this.displayName = displayName

export class AnimalClass {
animalName: string;
description: string;
location: string;
constructor(animalName: string, description: string, location: string){

    this.animalName = animalName
    this.description = description
    this.location = location

I get this information by http
And I keep it in a user: Array = [];

private LoadProfile() {
// the first argument is a function which runs on success
(data: UserClass[]) => {
this.user = data
console.log("USEERRR: " + JSON.stringify(this.user));
// the second argument is a function which runs on error
err => console.error(err),
// the third argument is a function which runs on completion
() => console.log(‘done loading data’)

<ion-input type=“text” [(ngModel)]=“user.animalName” name=“animalName”>

But I can only display the data that the user is using.
The json anima is not shown by the view.