title: Angular 6 HttpClient using Map
body: <p>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.</p>
  
  <pre><code>&lt;div class="col-6" *ngIf="courseDatas$ | async as courses else NoData"&gt;
    &lt;div class="card" *ngFor="let course of courses"&gt;
      &lt;div class="card-body"&gt;
        &lt;span&gt;&lt;strong&gt;User ID is : &lt;/strong&gt;{{course.userId}}&lt;/span&gt;&lt;br&gt;
        &lt;span&gt;&lt;strong&gt;Title is : &lt;/strong&gt;{{course.title}}&lt;/span&gt;&lt;br&gt;
        &lt;span&gt;&lt;strong&gt;Body is : &lt;/strong&gt;{{course.body}}&lt;/span&gt;&lt;br&gt;
        &lt;span&gt;&lt;strong&gt;ID is : &lt;/strong&gt;{{course.id}}&lt;/span&gt;
      &lt;/div&gt;
      &lt;ng-template #NoData&gt;No Data Available&lt;/ng-template&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>App component : </p>
  
  <pre><code>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&lt;any&gt;;
  
    constructor(private posts : PostsService){}
  
  
    ngOnInit(){
      this.courseDatas$ = this.posts.getData();
  
    }
  }
  </code></pre>
  
  <p>posts Service : </p>
  
  <pre><code>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&lt;any&gt; {
      return this.http.get(this.postURL).pipe(
        map(data =&gt; {
          for (let datas of (data as Array&lt;any&gt;)){
            datas.title = datas.title + "Hey";
          }
        }),
      );
    }
  </code></pre>
  
  <p>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.</p>