Problem with converting response from Http request

Question

I have this HTTP request:

storeCategory(file: File, category: CategoryModel): Observable<HttpEvent<{}>> {
    const formdata: FormData = new FormData();
    console.log("1")
    formdata.append('file', file);
    formdata.append('category', new Blob([JSON.stringify({ "category_name": category.category_name, "category_description": category.category_description })], { type: "application/json" }))
    const url = `api/cateogry/saveCategory`;
    const req = new HttpRequest('POST', url, formdata, {
      reportProgress: true,
      responseType: 'text'
    });
    return this.http.request<CategoryModel>(req);
  }

From this method I send data and image, and my backend method returns a JSON-object, but I want to bind that object as a CategoryModel, but now it is bound to HttpEvent.

My callback : Another image:

Another image:

Your return type is Observable<HttpEvent<{}>>, maybe that is why? You can change it to Observable<CategoryModel>? — John
– John, Commented Mar 8, 2019 at 10:23
When I do that I have error: Type 'Observable<HttpEvent<CategoryModel>>' is not assignable to type 'Observable<CategoryModel>'. Type 'HttpEvent<CategoryModel>' is not assignable to type 'CategoryModel'. Type 'HttpSentEvent' is missing the following properties from type 'CategoryModel': id, category_name, category_description, image_path, products — SIn san sun
– SIn san sun, Commented Mar 8, 2019 at 10:25
Does it work if you add this as well: this.http.request<CategoryModel>(req).body // added body. Some documentation here: angular.io/api/common/http/HttpRequest — John
– John, Commented Mar 8, 2019 at 10:28
Sorry to ask but ...Is there not success callback of http request? — MukulSharma
– MukulSharma, Commented Mar 8, 2019 at 10:34

John · Accepted Answer · 2019-03-11 14:40:06Z

2

From the image you posted, it seems the request is not a CategoryModel, but a list of CategoryModels inside a HttpResponse-object. Since you are using http.request, you will get many responses, and each have a different HttpEventType found here. You need to filter the response for each type, and get the content you want based on the type (e.g. event.type === HttpEventType.Response).

Try this:

storeCategory(file: File, category: CategoryModel): Observable<CategoryModel[]> {
    const formdata: FormData = new FormData();
    console.log("1")
    formdata.append('file', file);
    formdata.append('category', new Blob([JSON.stringify({ "category_name": category.category_name, "category_description": category.category_description })], { type: "application/json" }))
    const url = `api/cateogry/saveCategory`;
    const req = new HttpRequest('POST', url, formdata, {
      reportProgress: true,
      responseType: 'text'
    });
    return this.http.request<any>(req).pipe(map(event => {
     console.log("event",event);
     if(event.type == HttpEventType.Response){ // try different event types based on desired result.
      event.body = event.body.replace(/\\/g,"/"); // replace all double backslashes with slash.
      return <CategoryModel[]>JSON.parse(event.body); // try to parse the data if it is a string
     }
    }));
  }

I changed the return type of the method to be Observable<CategoryModel[]>, and changed the return statement to convert the result to reflect that.

remember to import {map} from 'rxjs/operators' in your component remember to import {HttpEventType} from '@angular/common/http' in your component

And also have a look at the example from the Angular docs

The different HttpEventTypes can be found here

edited Mar 11, 2019 at 14:40

answered Mar 8, 2019 at 11:17

John

11.6k5 gold badges60 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

SIn san sun Over a year ago

Thanks, but I have a problem with partialText. This is my error:

Property 'partialText' does not exist on type 'HttpEvent<any>'.   Property 'partialText' does not exist on type 'HttpSentEvent'

John Over a year ago

I added some changes that might help. I think you need to do event.body.partialText, and filter based on the type of event. I think the HttpEventType.Response is the correct one. Try to do a console.log("event",event") and see how it looks like. It might be easier to know what to return

SIn san sun Over a year ago

Sorry, but I have a problem with partialText: Property 'partialText' does not exist on type 'CategoryModel[]'.

John Over a year ago

I made some edits: return this.http.request<any>(req).pipe(map(event => { I changed CategoryModel[] to any inside the return statement.

SIn san sun Over a year ago

Finally this work. Great job man, this is very helpful I appreciate a lot.

|

Muhammad Abdullah Shafiq · Accepted Answer · 2019-03-08 10:47:00Z

0

You need to create Object of Class CategoryModel and pass the params in constructor.

let resp = new CategoryModel(json_object[0]);

edited Mar 8, 2019 at 10:47

answered Mar 8, 2019 at 10:23

Muhammad Abdullah Shafiq

8646 silver badges17 bronze badges

6 Comments

SIn san sun Over a year ago

That is not possible, a have error:

Expected 5 arguments, but got 1.ts(2554) category.model.ts(12, 40): An argument for 'category_description' was not provided. (parameter) data: HttpEvent<{}>

SIn san sun Over a year ago

I have the array of json_object. I think that is a problem with this solution.

Muhammad Abdullah Shafiq Over a year ago

so then you can call a loop around the above statement.

SIn san sun Over a year ago

Any example of this?

Muhammad Abdullah Shafiq Over a year ago

kindly try this let arr = json_array.map(e => new CategoryModel(e));

|

Collectives™ on Stack Overflow

Problem with converting response from Http request

2 Answers 2

9 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related