title: How to add prefix to an Observable column value using map() operator?
body: <p>I have an Observable value returned from a service method and I want to add a prefix e.g. 'Prof' as a prefix using <code>map()</code> operator.</p>
  <p>My method that returns Observable is:</p>
  <pre><code>list(): Observable&lt;EmployeesDto&gt; { 
      items: Employees;
      ...
  }
  </code></pre>
  <p>And here is the approach that I try to map data and assign it:</p>
  <pre><code>...
  employeeList : EmployeesDto;
  
  this.service.list()
  .pipe(
    map((list: EmployeesDto) =&gt; {
      list.items.forEach(m =&gt; {
        m.Name = 'Dr.' + m.Name
      });
      this.employeeList = list; // the code does not hit there and cannot set data
    })
  )
  </code></pre>
  <p>But the problem is that I cannot set employeeList. So, what is the problem with this implementation?</p>
  <p><strong>Update:</strong>
  At last step I tessted by using this approach:</p>
  <pre><code>import { Component, OnInit } from &quot;@angular/core&quot;;
  
  import { of, Observable } from &quot;rxjs&quot;;
  import { map } from &quot;rxjs/operators&quot;;
  
  @Component({
    selector: &quot;my-app&quot;,
    templateUrl: &quot;./app.component.html&quot;
  })
  export class AppComponent implements OnInit {
    employees$: Observable&lt;any[]&gt;;
    employeesDto$: Observable&lt;any[]&gt;;
  
    constructor() {}
  
    ngOnInit(): void {
      this.initializeData();
    }
  
    initializeData(): void {
      // this.employees$ = this.getMockEmployees().pipe(
      //   map(list =&gt; list.map(item =&gt; ({ ...item, name: `Dr. ${item.name}` })))
      // );
  
      this.employees$ = this.getMockEmployeesDto().pipe(
        map(list =&gt; list.map(item =&gt; ({ ...item, name: `Dr. ${item.name}` })))
      )
      .subscribe(list =&gt; {
        console.log(list);
      }
      )
    }
  
    getMockEmployees(): Observable&lt;any[]&gt; {
      const employees = [
        {
          name: &quot;Ariana&quot;,
          age: 1
        },
        {
          name: &quot;Tom&quot;,
          age: 2
        },
        {
          name: &quot;Justin&quot;,
          age: 3
        }
      ];
  
      return of(employees);
    }
  
    getMockEmployeesDto(): Observable&lt;any[]&gt; {
      const employees$: Observable&lt;any[]&gt;;
  
      const employeesDto = [
        {
          name: &quot;Ariana&quot;,
          age: 1
        },
        {
          name: &quot;Tom&quot;,
          age: 2
        },
        {
          name: &quot;Justin&quot;,
          age: 3
        }
      ];
  
      return of(employeesDto);
    }
  }
  </code></pre>