The data from json is not populated in my angular 8 app

Question

My json looks as follows:

    {
    "content": [
        {
            "id": 1,
            "name": "test name",
            "email": "[email protected]",
            "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
}

and I want to populate with it my angular 8 website.

In my api.service.ts I have:

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

and in app.components.ts I have:

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

Now, myStructure is an interface, that contains:

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

but the data inside myStructure somehow is not populated. I have no idea why, can you help me with that?

Sajeetharan · Accepted Answer · 2020-01-11 14:33:09Z

2

You need to add the console.log inside the subscribe part of the code, otherwise as it gets executed first, you will see it as 0. Change it as,

.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);  
    });

EDIT:

As I see you want to display the content array on the front end, so you need to assign the data as,

 this.myStructure = resp.body.content;

edited Jan 11, 2020 at 14:33

answered Jan 11, 2020 at 14:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

randomuser1 Over a year ago

ok, that makes sense, but it still does not populate the data to the frontend. In my app.component.html I have the code: <ul><li *ngFor="let product of myStructure"><h2>{{product.name}} / ${{product.email}}</h2></li></ul> and even though I see the data from console.log in the console, I don't see it in html code. Do you know why?

randomuser1 Over a year ago

thank you for the answer, but when I put resp.body.content the project does not compile, there's an error TS2339: Property 'content' does not exist on type 'MyStructure[]'. I think it's because of the declaration of getMyStructure method in api.service.ts - I don't know how should I change it though

Sajeetharan Over a year ago

change subscribe(function(resp : any) {

randomuser1 Over a year ago

thank you, I changed it, the project compiled, but I still don't see any data in html, I wonder why :| it seems like the data in html file (myStructure) is empty :(

Sajeetharan Over a year ago

can you print the response of console.log(resp.body);

|

C.OG · Accepted Answer · 2020-01-11 15:10:32Z

1

Your API doesn't return MyStructure[] it returns:

Please chose a better name for the interface

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; 
    }); 
}

Take note of the arrow function in the subscribe .subscribe((resp) => {

edited Jan 11, 2020 at 15:10

answered Jan 11, 2020 at 15:01

C.OG

6,5373 gold badges24 silver badges41 bronze badges

1 Comment

randomuser1 Over a year ago

hm, that makes sense... btw. are you sure there should be return this.http.get<MyStructure[]> in api.service.ts instead of return this.http.get<SomeStructure> ?

Collectives™ on Stack Overflow

The data from json is not populated in my angular 8 app

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related