使用Map的Angular 6 HttpClient

Question

For learning purposes I am trying to get datas from a json fake API and add "hey" to all titles before returning an Observable. So far I can display the data if I don't use Map and even while using map if I console.log my variable it says Observable but it does not display in my template.

<div class="col-6" *ngIf="courseDatas$ | async as courses else NoData">
  <div class="card" *ngFor="let course of courses">
    <div class="card-body">
      <span><strong>User ID is : </strong>{{course.userId}}</span><br>
      <span><strong>Title is : </strong>{{course.title}}</span><br>
      <span><strong>Body is : </strong>{{course.body}}</span><br>
      <span><strong>ID is : </strong>{{course.id}}</span>
    </div>
    <ng-template #NoData>No Data Available</ng-template>
  </div>
</div>

App component :

import {Component, OnInit} from '@angular/core';
import {PostsService} from "./posts.service";

import {Observable} from "rxjs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  courseDatas$ : Observable<any>;

  constructor(private posts : PostsService){}


  ngOnInit(){
    this.courseDatas$ = this.posts.getData();

  }
}

posts Service :

import { Injectable } from '@angular/core'
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {map} from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class PostsService {

  private postURL: string = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.postURL).pipe(
      map(data => {
        for (let datas of (data as Array<any>)){
          datas.title = datas.title + "Hey";
        }
      }),
    );
  }

So, if I don't use the map operator in my getData method in my service everything displays properly. If I use the map operator if I console.log coursesDatas$ in App.Component the console says Observable so I don't understand why it does not work with my async pipe in the template. Also, if I use console.log(datas.title) inside my map operator it does log every titles with Hey at the end.

Answer 1

map should return something to mutate current property, in your case I guess you should return the data

getData(): Observable<any> {
    return this.http.get(this.postURL).pipe(
      map(data => {
        for (let datas of (data as Array<any>)){
          datas.title = datas.title + "Hey";
        }
        return data;
      }),
    );
}

by the way you can use Array.prototype 's map instead of for loop too, to mutate your data

getData(): Observable<any> {
    return this.http.get(this.postURL).pipe(
      map(data => data.map(d => (d.title = d.title +"Hey", d));
      }),
    );
 }

note that if curly braces are missing in arrow function, it will return automatically