Observables - Angular - .map 不工作，但 .subscribe 可以

Question

I have an endpoint which is called and looks like this:

organizationSubsidiaries(sfid: string) {
  const url = `${this.baseURL}/${ENDPOINTS.organizations}/${this.organization.id}/${ENDPOINTS.subsidiaries}`;
  return this.http.get(url).map(res => res.json());
}

If I call it like this it works and consoles correctly:

getOrgSubsidiaries(id) {
  return this.organizationSubsidiaries(id)
    .subscribe(data => { //changing this to .map means it won't work!

      let subsidiaryNames = []
      data.forEach(sub => {
        console.log(sub.SubsidiaryName)
        subsidiaryNames.push(sub.SubsidiaryName)
      })
      subsidiaryNames = subsidiaryNames.filter(this.onlyUnique);

      console.log('data from subsidiaries' + JSON.stringify(subsidiaryNames))

    });
}

When it's .map it doesn't work, but I need it to be .map as I need to subscribe to it in another file so I can asynchronously use the data in another component:

ngOnInit(): void {
  this.engagementService.getOrgSubsidiaries(id).subscribe(data => {
     this.orgSubsidiaries = data;
});

I need it so the .map also works as the subscribe does so I can actually subscribe to it and use the data in my other component!

In a slightly different issue this function in my other component doesn't recognise id.

Answer 1

use the pipe in rxjs 6

 return this.http.get(url).pipe( map(res => res.json()));

import the map

import { map } from 'rxjs/operators'

Answer 2

The issue depends on two things:

1. Which version of Angular you're using.
2. Whether you're using HttpClient or Http

---

Let's talk about the Angular Version first:

If you're using Angular 6, it comes with Rxjs 6. So on any Observable type value, you won't get to use operators like map directly by importing them from their paths and chaining them to the Observable value. In this case, you'll have to use .pipe that would be available on the Observable value and inside this .pipe you can then use your Operators.

An eg:

import { map } from 'rxjs/operators';
...
return this.http.get('...').pipe(map(...))  // This returns an Observable too

If you're using Angular 5, 4, or 2, it comes with previous versions of Rxjs. So on any Observable type value, you will get to use operators like map directly by importing them from their paths and chaining them to the Observable value. In this case, you'll not have to use .pipe

An eg:

import 'rxjs/add/operators/map';
...
return this.http.get('...').map(...)  // This returns an Observable too

---

Now, let's talk about whether you're using HttpClient or Http :

If you're using HttpClient , then you won't have to map the response by calling .json on it. So you can simply do:

constructor(private http: HttpClient, ...) {}
...
return this.http.get(...); // This will return the Actual Response DATA

If you're using Http , then you'll have to map the response by calling .json on it.

So in case of Angular 2,4,5, it would look something like:

import 'rxjs/add/operators/map'
...
constructor(private http: Http, ...) {}
...
return this.http.get(...).map(res => res.json());

And in case of Angular 6, I guess Http has been removed. So you won't be able to inject it as a dependency in the first place.

UPDATE

I think the issue is that you haven't injected Http or HttpClient as a Dependency in your EngagementService service. And hence the error.

In case of Angular 6:

Just add a constructor as well, that injects HttpClient as a dependency.