httpClient put request display error

Question

I want to update some data and I use for example an free api from internet.

I am getting following error in my browser:

What is the problem?

  updateShortUrl(data: ShortUrl): Observable<any> {
     return this._http.put('https://jsonplaceholder.typicode.com/posts/1').pipe(map((res) => {
      return res;
    }));

  }

My imports looks like:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpParams } from '@angular/common/http';
import { map } from 'rxjs-compat/operator/map';
import { map, Observable } from 'rxjs/operators';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/switchMap';

score 0 · Answer 1 · 2018-08-26T16:18:06.823

The problem is that you are using a POST request and you need to be sending more than one parameter when they are post request. If you notice you are passing a parameter to the updateShortUrl method but you are never using it either.

updateShortUrl(data: ShortUrl): Observable<any> {
     return this._http.put('https://jsonplaceholder.typicode.com/posts/1', YOUR_PARAMETER_HERE).pipe(map((res) => {
      return res;
    }));   
  }

Also, remember using 'any' is not good practice. By you using .pipe will always return an observable so no need to repeat yourself by putting any. Another thing is if you aren't doing anything with the request that is coming back, you don't need to use pipe. You can have something like this:

updateShortUrl(data: ShortUrl) {
         return this._http.put('https://jsonplaceholder.typicode.com/posts/1', YOUR_PARAMETER_HERE);
      }

The best practice will be for you to create a module that specifies the kind of Observable you are getting

export class Post {
     userId: number,
     id: number,
     title: string,
     body: string

     constructor(private userId: number, private id: number, private title: , private body: string) {
      this.userId= userId;
      this.id= id;
      this.title = title
      this.body = body
     }
}

And you use it the following way:

updateShortUrl(data: ShortUrl) Observable<Post> {
   return this._http.put('https://jsonplaceholder.typicode.com/posts/1', YOUR_PARAMETER_HERE);
}

Also, I notice you are using that jsonplaceholder to test you app. You can always use JSON-SERVER https://www.npmjs.com/package/json-server

httpClient put request display error

1 Answers1