CODEWITHSUNDEEP
angulartypescripthttp
user10157350
user10157350

Reputation:

Angular RxJS mergeMap types

Trying to pull the longitude and latitude from a geo location service into list.service using http.get request URL.

First issue:

businesses Property 'businesses' does not exist on type '{}'

Appreciate the help on this issue and the time

list.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { List } from '../models/list.model';
import { map } from 'rxjs/operators';
import { GeolocationService } from '../services/geolocation.service';
import { mergeMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ListService {
    private serverApi = 'http://localhost:3000';

    constructor(private http: HttpClient, private geoServ: GeolocationService) { }

    public getAllLists(): Observable<List[]> {
        return this.geoServ.getGeoLocation().pipe(
          mergeMap<{businesses: List[]}>(({ latitude, longitude }) =>             
            this.http.get(`${this.serverApi}/yelp/${longitude}/${latitude}`).pipe(
            )
          ),
          map(res => res.businesses));
    }
}

geolocation.service.ts:

import { Injectable } from '@angular/core';
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class GeolocationService {

  constructor() { }

  getGeoLocation() {
    return new Observable((observer) => {
      console.log('Geolocation working!');
      const options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      };
      const success = (pos) => {
        const crd = pos.coords;
        console.log(`Longitude : ${crd.longitude}`);
        const location = {
          "latitude" : crd.longitude,
          "longitude": crd.longitude
        };
        observer.next(location);
        observer.complete();
      };
      const error = (err) => {
        console.warn(`ERROR(${err.code}): ${err.message}`);
        observer.error(err);
        observer.complete();
      };
      navigator.geolocation.getCurrentPosition(success, error, options);
    });  
  }
}

list.model.ts:

export interface List {
    id: string;
    name?: string;
    rating?: number;
    review_count?: number;
    url?: string;
    location: string;
    display_name?: string;
    image_url?: string;
    is_closed?: boolean;
}

Added model.ts to help clarify

Upvotes: 2

Views: 1509

Answers (2)

Poul Kruijt
Poul Kruijt

Reputation: 71911

Seems like you are still using the old angular http client. This doesn't work well with typings either. To fix the typing add a type object to the mergeMap generic parameter

public getAllLists(): Observable<List[]> {
  return this.geoServ.getGeoLocation().pipe(
    mergeMap<{latitude: string, longitude: string}, {businesses: List[]}>(({ latitude, longitude }) =>             
      this.http.get(`${this.serverApi}/yelp/${longitude}/${latitude}`).pipe(
        map(res => res.json()), // remove after updating to new http client
      )
    ),
    map(res => res.businesses));
}

Upvotes: 2

user184994
user184994

Reputation: 18281

Your code says that your GET returns a List[], but an array wont have a businesses property, which is why it's complaining. You can use:

  public getAllLists(): Observable<List[]> {
    return this.geoServ.getGeoLocation().pipe(
      mergeMap(({ latitude, longitude }) =>
        this.http.get<any>(`${this.serverApi}/yelp/${longitude}/${latitude}`)
      ),
      map(res => res.businesses));
  }

This will compile, but if the response really is an array, the Observable may end up emitting undefined

Upvotes: 2

Related Questions