Struggling to chart out the post response in Angular 7

I am facing an issue while setting up a service on Angular version 7. The problem arises with the res.json() method, throwing an error stating

Property 'json' does not exist on type 'Object'
. Below is my service's code:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from "rxjs";
import 'rxjs/add/operator/map';
import { map } from 'rxjs/operators';

import {
    SVCParameters,
    SVCResult
} from "./types";

const SERVER_URL: string = 'api/';

@Injectable()
export class IrisService {

    constructor(private http: HttpClient) {
    }

    public trainModel(svcParameters: SVCParameters): Observable<SVCResult> {
        return this.http.post(`${SERVER_URL}train`, svcParameters).pipe(map(res => res.json()));

    }
}

Below is the code snippet from my types.ts file defining the classes for SVC parameters and results:

export class SVCParameters {
C: number = 2.0;
}

export class SVCResult{
accuracy: number;
}

Answer â„–1

When using Angular 7 HttpClientModule, the response is automatically returned as JSON. There's no need to manipulate the response by using res.json(). Simply remove the pipe operator and everything should work without any issues.

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from "rxjs";
import 'rxjs/add/operator/map';
import { map } from 'rxjs/operators';

import {
    SVCParameters,
    SVCResult
} from "./types";

const SERVER_URL: string = 'api/';

@Injectable()
export class IrisService {

    constructor(private http: HttpClient) {
    }

    public trainModel(svcParameters: SVCParameters): Observable<SVCResult> {
        return this.http.post(`${SERVER_URL}train`, svcParameters);

    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing ng class within a loop

Having some trouble with my template that loops through a JSON file using json server. The issue I'm facing is related to correctly applying ng class when clicking on icons. Currently, when I click on an icon, it adds a SCSS class but applies it to al ...

Running the ng serve --o command on Windows cmd results in the command prompt closing

Whenever I execute the command: ng serve --o The process closes abruptly in Windows cmd, preventing me from using ctrl+C to terminate the running angular application. ...

TypeScript/Javascript - Error: The specified function is not callable

After recently delving into TypeScript, I found myself encountering an error in my code for a wheel mini-game on my app. The specific error being displayed in the console is: this.easeOut is not a function The relevant portion of the code causing the iss ...

What is the best way to implement a custom NgbDateParserFormatter from angular-bootstrap in Angular 8?

Currently, I am working on customizing the appearance of dates in a form using Angular-Bootstrap's datepicker with NgbDateParserFormatter. The details can be found at here. My goal is to display the date in the format of year-month-day in the form fi ...

Angular2 date input field unable to restrict minimum and maximum dates

Having trouble with dynamic min and max attributes not being recognized in ionic2 when using the 'datetime-local' type. <ion-input value="" type="datetime-local" [formControl]="expdate" [attr.min]="mindate" [attr.max]="maxdate"></ion-in ...

"Utilizing generic types with the 'extends' keyword to input arguments into a function that requires a more specific

I recently tried out the TypeScript playground and came across a puzzling issue that I can't seem to wrap my head around. Below is the code snippet: type Foo = { t: string; } type Bar = string | { date: Date; list: string; } function te ...

What is the best way to transform my tuple so that it can be properly formatted for JSON in Python?

I have a Python code snippet that looks like this: @app.route('/getData', methods = ['GET']) def get_Data(): c.execute("SELECT abstract,category,date,url from Data") data = c.fetchall() resp = jsonify(data) resp.st ...

The "export 'ɵɵcomponentHostSyntheticListener' (imported as 'i0') was not found in '@angular/core" error occurred during the Angular build

Trying to set up an Angular application with clarity UI. Using Angular version 10.1.1 and after adding clarity, encountering build errors. ERROR in ./node_modules/@clr/angular/esm2015/utils/animations/expandable-animation/expandable-animation.js 33:8-43 &q ...

Issue in Typescript: The type 'RegExpMatchArray' cannot be assigned to a parameter of type 'string'

Here is the code snippet I am working with: import { persistState } from 'redux-devtools'; const enhancer = compose( applyMiddleware(thunk, router, logger), DevTools.instrument(), persistState( window.location.href.match(/[?&]debu ...

Typescript is facing an issue locating the declaration file

I'm encountering an issue with TypeScript not recognizing my declaration file, even though it exists. Can anyone provide insight into why this might be happening? Here is the structure of my project: scr - main.ts - dec.d.ts str-utils - index. ...

Enhance the Angular KendoGrid excelExport feature with a custom column addition event

When utilizing the excelExport event in KendoGrid to modify certain column data before exporting it, is there a way to insert a new column between two existing columns? Here's the current code I'm using to manipulate dates. I would like to add a ...

The error message "TypeScript reflect-metadata Cannot find name 'Symbol'" indicates that TypeScript is unable to locate

While browsing through http://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators, I encountered an issue where it could not find the Symbol. I was unsure whether this is related to the usage of reflect-metadata or if it was previously in ...

Incorporating a specific time to a JavaScript date object

In my Angular application, I am facing an issue with adding a time to a date. The appointmentDate from the date picker returns a JavaScript date while the appointmentTime is selected from a dropdown with options like "8:00", "8:30", "9:00", etc. I'm ...

Adjusting the width of row items in Angular by modifying the CSS styles

I am envisioning a horizontal bar with items that are all the same width and evenly spaced apart. They can expand vertically as needed. Check out the updated version here on StackBlitz Issue: I am struggling to automatically set the width of the row elem ...

Comparing MediaObserver and BreakpointObserver: Understanding the variances

Upon conducting some research, I discovered that the recommended way to create responsive Material-themed UI is by using the Flex-Layout library (as discussed in this thread). The documentation indicates that this library offers the MediaObserver class for ...

Guide to iterating through an Observable<Object[]> to generate an array of objects

Google Firestore collection named users is structured as follows : { "contactNumber":"0123456789", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88e2e7e0e6ece7edc8efe5e9e1e4a6ebe ...

What is the best way to ensure that my variables are properly differentiated in order to prevent Angular --prod --aot from causing empty values at runtime?

While testing my code locally in production, the functions I've written are returning the expected values when two parameters are passed in. However, after running ng build --prod --aot, the variable name within the functions changes from name to t. ...

Option in TypeScript to retain the '//' in the filename when removed

I'm currently attempting to implement the angular2 quick start example in my local environment. The only feasible way for me to serve the application is as a plugin within an existing application on my system. This particular application hosts a web ...

I am puzzled as to why my function's return type transforms into a promise when I interact with the cell.value or use console.log

Recently, I embarked on the journey of coding a validation process for my Excel Sheet. To keep the code concise, I implemented it in a straightforward manner. Here is a snippet of my source code: function main(workbook: ExcelScript.Workbook) { console. ...

Ionic 5.9.1 and Angular 12 FormControlName

Currently, I am delving into the realm of Reactive Forms with Angular 12 and Ionic 5.9.1 on my app. To my surprise, upon checking the latest documentation on the https://ionicframework.com/docs/api/input#properties Ionic website, I realized that there is n ...