Get object from database with Angular

Question

I created my backlog with symfony, everything is ok, but now, I try to get my infos from the database.

My products will be owned by a category (which is an object), and I'm trying to display all my categories, but my TS request seems....bad.

Here is my code:

<ul>
    <li *ngFor="let categorie of getAll()">{{ categorie }}</li>
</ul>

Component:

export class ShowCatComponent implements OnInit {

    ngOnInit() { }

    constructor(private categorieService: CategorieService) {

    }

    getAll() {
        let categories;
        categories = this.categorieService.getAllCategorie();
        console.log(categories);
        return categories;
    }


}

service

  getAllCategorie(): Promise<any> {
        const UserToken = this.localStorage.get('userToken');
        const jsonToken = JSON.parse(UserToken);
        const httpOptions = {
            headers: new HttpHeaders({
                Authorization: jsonToken["token"]
            })
        };
        return this.http.get(this.HTTP_URL + this.GET_CATEGORIES_URL, httpOptions).toPromise()
            .then((response: Array<any>) => { return response.map(el => Categorie) });
    }

This last request seems the problem, here is the log:

ERROR Error: Cannot find a differ supporting object '[object Promise]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Here is a link to learn how it works. You have an asynchronous call, you have to handle it. — Random
– Random, Commented Mar 17, 2021 at 9:52

kvbx · Accepted Answer · 2021-03-17 09:54:27Z

1

The problem is, that service.getAllCategorie() returns a Promise but ngFor only allows to loop over iterables such as Arrays (as the error says). The easiest way to fix this would be (as user 'Random' correctly identified) to use the async pipe. Just change the ngFor to let categorie of (getAll() | async). This way the Promise will be resolved first, before looping over the result.

answered Mar 17, 2021 at 9:54

kvbx

3802 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Get object from database with Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related