Angular 5 - 'json does not exist on type Object'

Question

I'm following a simple guide and amending it lightly for my needs - But I have finally hit a snag regarding mapping and subscribing

https://www.sitepoint.com/mean-stack-angular-2-angular-cli/ - This is the guide and everything is working until I go to build the app after building out the List Service.

I've made a few amendments due to Angular 5 such as replacing with HttpClient, but nothing out of the ordinary.

My present issue falls on these 2 functions:

  public getAllTasks():Observable<Task[]> {
    let URI = `${this.serverApi}/tasks/`;
    return this.http.get(URI)
      .map(res => res.json())
      .map(res => <Task[]>res.tasks);
  }



  public deleteTask(taskId : string){
    let URI = `${this.serverApi}/tasks/${taskId}`;
    let headers = new HttpHeaders;
    headers.append('Content-Type', 'application/json');
    return this.http.delete(URI,  {headers})
      .map(res => res.json());

  }

Even my IDE tells me that

  .map(res => res.json())

won't work in either function, saying: Property 'json' does not exist on type 'Object'.

I've searched around a bit and found some older post with suggestions such as modifying it to be

  .map((res: Response) => res.json())

but that gave me a very similar error

A function whose declared type is neither 'void' nor 'any' must return a value.

My model is:

export interface Task {
  _id?: string;
  title: string;
  description: string;
  category: string;
}

Originally this was a class, but I modified it to an interface, as was recommended. I'm unsure if it is related.

Unsure if it's relative, but the component side of it is:

 ngOnInit() {
    this.loadTasks();
  }

  public loadTasks() {

    this.taskServ.getAllTasks().subscribe(
      response => this.tasks = response,
    )
  }

I assume this is some confusion I have with how map works or what it expects. Any input would be appreciated.

Update

Angular - res.json() is not a function

As mentioned in this post, it seems that HttpClient natively returns the res in JSON, so actually deleting those lines removed the errors. I will post my complete solution once I have it proved out.

Answer 1

With HttpClient, you don't need map(res => res.json()) You can get the data from the json as follow:

    public getAllTasks():Observable<Task[]> {
        let URI = `${this.serverApi}/tasks/`;
        return this.http.get<Task[]>(URI);
    }

See https://angular.io/guide/http

And in your component, from which you are calling your service you can subscribe to the asynchronous data:

 export class TestComponent implements OnInit {
    tasks: Task[];

    constructor(private taskService: MyTaskService) {
    }

    ngOnInit(): void {
     this.taskService.getAllTasks().subscribe((data: Task[]) => {
          this.tasks = data;
        });
    }

    //other methods

    }

In the HTML, where you are listing the tasks, you should use optional chaining operator {{ tasks?.length }}, in order to avoid possible errors in the browser's console.

Answer 2

Use this code sample .map((res: Response) => res.json()) as .map(res => res.json())