Convert object and push in Array in Angular 6

Question

I have service and method getCategory() for get category from server. Method is :

getCategory(): Observable<CategoryModel[]> {
    return this.http.get<CategoryModel[]> (this.productUrl)
        .pipe(
            catchError(this.handleError('getHeroes', []))
        );
}

In my component I want store data in list categoryList: CategoryModel[]; with method

getCategory(): void {
        this.dataStorageServiceService.getCategory()
            .subscribe(
                (cateogrys: CategoryModel[]) => {
                    this.categoryList = cateogrys;
                    console.log(this.categoryList)
                }
            }

And in outputcategoryList is Object, and I can not render on the template.

With firebase you will get objects and not arrays. for more info: firebase.googleblog.com/2014/04/… — 255kb - Mockoon
– 255kb - Mockoon, Commented Oct 31, 2018 at 9:42

Sunil · Accepted Answer · 2018-10-31 09:48:56Z

4

Since you are getting the object instead of an Array. You have two options, either you convert your Object to Array or use KeyValuePipe in the html template -

 <div *ngFor="let category of categoryList | keyvalue">
      {{category.key}}:{{category.value}}
  </div>

For more info visit - https://github.com/angular/angular/blob/master/CHANGELOG.md#610-beta1-2018-06-13

edited Oct 31, 2018 at 9:48

answered Oct 31, 2018 at 9:41

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

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

Comments

255kb - Mockoon · Accepted Answer · 2018-10-31 09:46:15Z

2

With firebase you will get objects and not arrays. for more info: https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html

So one solution is to "convert" the object to an array when you fetch it in your service:

return this.http.get<CategoryModel[]> (this.productUrl)
  .pipe(
    map(products => {
      return Object.values(products);

      // OR

      return Object.keys(products).map((keyName) => {
        return {id: keyName, product: products[keyName]};
      });
    }),
    catchError(this.handleError('getHeroes', []))
  );

answered Oct 31, 2018 at 9:46

255kb - Mockoon

6,9922 gold badges26 silver badges32 bronze badges

1 Comment

Muhammed Albarmavi Over a year ago

Object.values(products); is supper cleaner than KeyValuePipe

Mayur Saner · Accepted Answer · 2019-06-04 07:28:43Z

0

You can also use this ,

categoryList : CategoryModel[] = [];

And then you can push the user object and make as a array,

this.categoryList .push(<<the data you want to push>>);

answered Jun 4, 2019 at 7:28

Mayur Saner

4625 silver badges11 bronze badges

Collectives™ on Stack Overflow

Convert object and push in Array in Angular 6

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related