Данные из json не заполняются в моем приложении angular 8

Question

Мой json выглядит следующим образом:

    {
    "content": [
        {
            "id": 1,
            "name": "test name",
            "email": "test@test.com",
            "img_url": "url",
            "field1": [
                {
                    "id": 10,
                    "userId": 1,
                    "registeredAt": "2020-01-09T22:21:23.272",
                    "amount": 200
                }
            ],
            "field2": [
                {
                    "id": 11,
                    "userId": 1,
                    "registeredAt": "2020-01-09T22:21:46.113",
                    "amount": 200
                }
            ],
            "creationDateTime": "2020-01-05T00:00:00Z"
        }
    ],
    "page": 0,
    "size": 30,
    "totalElements": 1,
    "totalPages": 1,
    "last": true
}

и я хочу заполнить его моим angular 8 веб-сайтом.

В моем api.service.ts у меня есть:

getMyStructure(): Observable<HttpResponse<MyStructure[]>> { 
    return this.http.get<MyStructure[]>( 
        localUrl, { observe: 'response' }); 
} 

и в app.components.ts У меня есть:

myStructure: MyStructure[] = []; 

getMyStructure() { 
    this.api.getMyStructure() 
    .subscribe(function(resp) { 
        console.log(resp.body.length); //this prints undefined 
        console.log(resp.body) // this prints {content: Array, page: 0, size: 30, totalElements: 1, totalPages: 1, …} 
        this.myStructure = resp.body; 
    }); 
    console.log("after"); 
    console.log(this.myStructure.length); //this prints 0 

Теперь myStructure - это интерфейс, который содержит:

export interface Shelter {
    id: number;
    name: string;
    email: string;
    img_url: string;
    field1: string[];
    field2: string[];
    creationDateTime: string;
}

, но данные внутри myStructure как-то не заполнены. Я понятия не имею, почему, вы можете мне помочь с этим?

Answer 1

Вам нужно добавить console.log внутри части кода subscribe, в противном случае, когда он будет выполнен первым, вы увидите его как 0. Измените его на

.subscribe(function(resp) { 
        console.log(resp.body.length); //this prints undefined 
        console.log(resp.body) // this prints {content: Array, page: 0, size: 30, totalElements: 1, totalPages: 1, …} 
        this.myStructure = resp.body; 
        console.log("after"); 
        console.log(this.myStructure.length);  
    }); 

РЕДАКТИРОВАТЬ:

Как я вижу, вы хотите отобразить массив содержимого на передней панели, поэтому вам нужно назначить данные как,

 this.myStructure = resp.body.content;

Answer 2

Ваш API не возвращает MyStructure[], он возвращает:

Пожалуйста, выберите лучшее имя для интерфейса

interface SomeStructure {
  content: MyStructure[];
  page: number;
  size: number;
  totalElements: number;
  totalPages: number;
  last: boolean
}

api.service .ts

getMyStructure(): Observable<HttpResponse<SomeStructure>> { 
    return this.http.get<SomeStructure>( 
        localUrl, { observe: 'response' }); 
} 

app.component.ts

myStructure: MyStructure[] = []; 

getMyStructure() { 
    this.api.getMyStructure() 
    .subscribe((resp) => { 
        this.myStructure = resp.body.content; 
    }); 
}

Обратите внимание на функцию стрелки в подписке .subscribe((resp) => {