how can I populate data from my json to construct grids in Angular 8?

Question

I'm trying to display data in my Angular 8 application. My webservice returns the following json:

{
    "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 for each element of this array I want to display a div with style card, e.g.:

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="url" alt="test name">
    <div class="card-body">
      <p class="card-text">[email protected]</p>
    </div>
  </div>

The code above I put in app.component.ts.

I started from modyfing my app.component.ts and I entered there:

export class AppComponent implements OnInit {
  title = 'myTestfrontend';

  mystructure: MyStructure[] = [];
  constructor(private api: ApiService) {}

    ngOnInit() {
        this.getMyStructure();
    }


    getMyStructure() {
        this.api.getMyStructure()
            .subscribe(resp => {
                for (const content of resp.body) {
                    this.mystructure.push(content);
                }
            });
    }
}

but it returns the error:

undefined is not a function (near '...content of resp.body...')

What's wrong here and how can I fix it so that I could display as many cards as there are entries in my json? Thanks a lot!

JBoothUA · Accepted Answer · 2020-01-09 22:59:37Z

1

 .subscribe(resp => {
                for (const content of resp.body) {
                    this.mystructure.push(content);
                }
            });

I think your problem is in here, my guess is it would be more correct to do something like:

 .subscribe(resp => function(resp) {
                for (const content of resp.body) {
                    this.mystructure.push(content);
                }
            });

o google what that means.. maybe it wants (resp) => function(resp) but not sure it might even be looking for () => function(resp) or maybe even just function(resp) with no arrow.. .subscribe(function(resp) {})

edited Jan 9, 2020 at 22:59

answered Jan 9, 2020 at 22:35

JBoothUA

3,1976 gold badges23 silver badges48 bronze badges

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

8 Comments

randomuser1 Over a year ago

Thanks! it did compile successfuly, however the function(resp) shows me a warning: TSLint: Shadowed name: 'resp'(no-shadowed-variable) do you know why?

randomuser1 Over a year ago

also, in my app.component.ts I added: <ul> <li *ngFor="let product of mystructure"> <p> {{product.name}} </p> </li> </ul> but I don't see anything printed in html file, do you know why?

JBoothUA Over a year ago

is mystructure created?? example this.mystructure = []; if so then that means it is still empty. i'm not too famliar with the no-shadowed-variable, you'd have to google what that means.. maybe it wants (resp) => function(resp) but not sure

JBoothUA Over a year ago

it might even be looking for () => function(resp)

randomuser1 Over a year ago

yes, thanks, the latter worked! so it seems like the code inside the for loop is not reachable, probably because the resp.body is empty. However when I print it before, it shows me that there is some content. console.log(resp.body); for (const content of resp.body) { console.log("test"); } shows me imgur.com/Westycs this <-- there is an object in console, but my for loop does not iterate over it

|

Collectives™ on Stack Overflow

how can I populate data from my json to construct grids in Angular 8?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related