CODEWITHSUNDEEP
angularhttp
SIn san sun
SIn san sun

Reputation: 633

Problem with converting response from Http request

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 : enter image description here Another image: enter image description here

Another image: enter image description here

Upvotes: 2

Views: 1425

Answers (2)

John
John

Reputation: 11439

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

Upvotes: 2

Muhammad Abdullah Shafiq
Muhammad Abdullah Shafiq

Reputation: 864

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

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

Upvotes: 0

Related Questions