I am learning Angular 2, TypeScript, RxJs, etc. and I am having a issue returning a subset of data inside a service using RxJs and Observable.

I expect the getCars function below to read a json file, parse it and return a slice of the data (offset and count). However, I always get all the data back (I have 200 entities/cars in the file I am testing with).

What am I doing wrong?

EntityService

@Injectable()
export class EntityService {

  constructor(private http: Http) { }

  getCars(offset: number, count: number): Observable<Car[]> {
     return this.http
      .get('resources/data/cars.json')   
      .map(this.extractData)
      .skip(offset)
      .take(count)
      .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body.data || {};
  }

  private handleError(error: any) {
    // ...
  }
}

cars.json

    {
        "data":[
            {
                "vin":"ee8a89d8",
                "brand":"Fiat",
                "year":1987,
                "color":"Maroon"
            },
            {
                "vin":"642b3edc",
                "brand":"Renault",
                "year":1968,
                "color":"White"
            }
    ]
}

I am learning Angular 2, TypeScript, RxJs, etc. and I am having a issue returning a subset of data inside a service using RxJs and Observable.

I expect the getCars function below to read a json file, parse it and return a slice of the data (offset and count). However, I always get all the data back (I have 200 entities/cars in the file I am testing with).

What am I doing wrong?

EntityService

@Injectable()
export class EntityService {

  constructor(private http: Http) { }

  getCars(offset: number, count: number): Observable<Car[]> {
     return this.http
      .get('resources/data/cars.json')   
      .map(this.extractData)
      .skip(offset)
      .take(count)
      .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body.data || {};
  }

  private handleError(error: any) {
    // ...
  }
}

cars.json

    {
        "data":[
            {
                "vin":"ee8a89d8",
                "brand":"Fiat",
                "year":1987,
                "color":"Maroon"
            },
            {
                "vin":"642b3edc",
                "brand":"Renault",
                "year":1968,
                "color":"White"
            }
    ]
}

• javascript
• typescript
• angular
• rxjs

1 Answer 1

In fact you will always load all the data using this. The skip and take operators apply only if you have several events received in the data flow:

• skip: skip a number of events
• take: take into account only a specified number of events

In your case (an HTTP request), you only have one: when you get the data. So if you want to filter you data, you need to use another map operator. Something like that:

getCars(offset: number, count: number): Observable<Car[]> {
  return this.http
    .get('resources/data/cars.json')   
    .map(this.extractData)
    .map(data => {
      return data.slice(offset, offset + count); // <----
    })
    .catch(this.handleError);
}