Angular 5 fill empty array with httpget

Question

I have an empty array(productsWithCategory) and i try to fill it on click event. But it is not working on first click. When i click once, array does not fill. After first click, everything works. But i really don't know why. Can you help me?

Sorry for my english.

category.component.html :

<h4 class="page-header">Categories</h4>
<div class="row">
  <div class="col-lg-3">
    <div class="list-group">
      <a 
        class="list-group-item" 
        *ngFor="let category of categoryList"
        (click)="getProducts(category.categoryId)">
        {{category.categoryName}}
      </a>
    </div>
  </div>
  <div class="col-lg-9">
    <div class="list-group">
      <a 
        class="list-group-item" 
        *ngFor="let product of productsWithCategory">
        {{product.productName}}
      </a>
    </div>
  </div>
</div>

category.component.ts:

import { Component, OnInit, DoCheck } from '@angular/core';
import { CategoryService } from './category.service';
import { Category } from './category';
import { Product } from '../product/product';
import { ProductService } from '../product/product.service';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.css'],
  providers: [CategoryService, ProductService]
})
export class CategoryComponent implements OnInit {
  categoryList: Category[];
  productsWithCategory: Product[] = [];
  constructor(
    private categoryService: CategoryService, 
    private productService: ProductService
  ) {}

  ngOnInit() {
    this.getCategories();
  }

  getCategories() {
    return this.categoryService.getCategories().subscribe(p => this.categoryList = p);
  }

  getProducts(categoryId: number) {
    this.productsWithCategory = this.productService.getProductsByCategory(categoryId);
  }
}

product.service.ts:

import { Injectable, Inject } from '@angular/core';
import { Product } from './product';
import { ProductList } from './product-list.mock';
import { Http, Response } from '@angular/http'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/do'
import 'rxjs/add/operator/catch'

@Injectable()
export class ProductService {
  constructor(
    private http: Http, 
    @Inject('apiUrl') private apiUrl
  ) {}

  productsByCategory: Product[] = [];
  getProducts(): Observable < Product[] > {
    return this.http.get(this.apiUrl + "products").map(response => response.json());
  }

  getProductsByCategory(categoryId: number) {
    this.getProducts().subscribe(x => this.productsByCategory = x.filter((s: Product) => s.categoryId == categoryId, x));

    **
    * //this.productsByCategory => is empty on first click***
    return this.productsByCategory;
  }
}

Because your return is called before subscribe when the code executes — David
– David, Commented Mar 16, 2018 at 14:29
A simple fix is to wait for categoryList and productsWithCategory with a ngIf(categoryList) — Swoox
– Swoox, Commented Mar 16, 2018 at 14:41

Oscar Paz · Accepted Answer · 2018-03-16 16:52:26Z

1

this.getProducts() is an asynchronous operation. So if you just return this.productsByCategory after calling that function, the call won't have finished. After that, of course, if you call the function, the asynchronous operation will have (probably) finished, and you'll receive the last data you retrieved. In fact, you could retrieve wrong results, as you always get the products filtered by the last call that finished, disregarding the actual categoryId you pass as parameter.

In fact, if you make several calls and they stop working (because you lose connection to the server) you keep 'receiving' data, though that data doesn't change.

You should return an Observable from getProductsByCategory:

return this.getProducts().filter(s => s.categoryId === categoryId);

Then you could subscribe to the observable in the calling function or use the async pipe in the template.

edited Mar 16, 2018 at 16:52

answered Mar 16, 2018 at 15:03

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

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

2 Comments

user3188649 Over a year ago

thank you for explanation.when i use "this.getProducts().filter(s => s.categoryId === categoryId);", i get error like this: property filter does not exist on type observable<Product[]>

Oscar Paz Over a year ago

You must import the filter operator, like you import map or do.

Collectives™ on Stack Overflow

Angular 5 fill empty array with httpget

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related