CODEWITHSUNDEEP
angulartypescriptrxjskarma-runner
Sergey
Sergey

Reputation: 7682

RxJs map passes an array instead of one element of an array

I have this service which retrieves data from the server

export class SiteService {

  API_URL = '/sites';

  constructor(
    private http: HttpClient
  ) { }

  getSites(): Observable<Site[]> {
    return this.http.get<Site[]>(this.API_URL).pipe(
      map((site: Site) => {
        console.log('---site', site);
        return new Site().deserialize(site);
      })
    );
  }
}

My data is currently coming from a mocking test via flush from testBed and HttpTestingCotroller. Here is what I pass

const dummySites = [
        {
          path: 'https://example.com/img1.img',
          siteLink: 'http://example1.com',
          features: [
            'feature 1',
            'feature 2',
            'feature 3'
          ]
        },
        {
          path: 'https://example.com/img2.img',
          siteLink: 'http://example2.com',
          features: [
            'feature 1',
            'feature 2',
            'feature 3'
          ]
        }
      ];

However at the end when I try to map through this array of data I get a strange behaviour of map. In the code there is a console.log to check what comes into the function and there is what it is enter image description here By some reason it passes not an element of an array but the whole array what breaks me the entire logic in the next steps.

Upvotes: 2

Views: 4670

Answers (1)

user184994
user184994

Reputation: 18281

Observables are designed to emit a stream of values. Some things like http will only emit one value, but some will emit several

The rxjs map operator is designed to transform each value that is emitted by the Observable. Your Observable originates from an HTTP request, so it will only ever emit one value, which in this case will be an array. That means the value that is passed into map is the array, not each value within the array.

If you also want to transform each item within the array, you can use the map function that belongs to the array as well

  getSites(): Observable<Site[]> {
    return this.http.get<Site[]>(this.API_URL).pipe(
      map((site: Site[]) => {
        console.log('---site', site);
        return site.map((s) => new Site().deserialize(s));
      })
    );
  }

Upvotes: 4

Related Questions