Include the request model as a parameter

I'm encountering an issue when trying to pass a model as a parameter to an API, resulting in the following error:

Type 'string' is not assignable to type 'AVAFModel'.

submitAvafDetails(): Observable<any> {
  this.avafBcmsVo = 'avafVO:{' + this.prepareAvafSubmitData() +'}';
  return this.httpService.processData('POST', CONSTANTS.API_URL + 'testService.exp', this.avafBcmsVo);
}

The error occurs on this line of code:

this.avafBcmsVo = 'avafVO:{' + this.prepareAvafSubmitData() +'}';

Below is my model structure:

export interface AVAFModel {
  bankingDetails: BankingDetails;
  digitalAcquisitionsConsent: DigitalAcquisitionsConsent;
  employmentDetails: EmploymentDetails;
  financeDetails: FinanceDetails;
  incomeAndExpenseDetails: IncomeAndExpenseDetails;
  personalAddressDetails: PersonalAddressDetails;
  personalDetails: PersonalDetails;
  vehicleAssetDetails: VehicleAssetDetails;
  preQualifiedCustomer: boolean | true;
}

prepareAvafSubmitData() {
  const avafBcmsRequestObj: AVAFModel = {
    bankingDetails: bankingDetailsVoModel,
    digitalAcquisitionsConsent: digitalAcquisitionsConsentVoModel,
    employmentDetails: employmentDetailsVoModel,
    financeDetails: financeDetailsVoModel,
    incomeAndExpenseDetails: incomeAndExpenseDetailsVoModel,
    personalAddressDetails: personalAddressDetailsVoModel,
    personalDetails: personalDetailsVoModel,
    vehicleAssetDetails: vehicleAssetDetailsVoModel,
    preQualifiedCustomer: this.getPrequalifiedStatus
  };

  return avafBcmsRequestObj;
}

Answer №1

  1. Consider declaring a new object variable instead of reusing this.avafBcmsVo to avoid type mismatch.

  2. Avoid manually constructing JSON strings as it may result in invalid syntax errors. Use JSON.stringify() to convert objects to JSON strings.

submitAvafDetails(): Observable<any> {
  let avafData: any = {
    avafVO: this.prepareAvafSubmitData()
  };

  return this.httpService.processData('POST', CONSTANTS.API_URL + 'testService.exp', JSON.stringify(avafData));
}

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

TypeScript async function that returns a Promise using jQuery

Currently, I am facing a challenge in building an MVC controller in TypeScript as I am struggling to make my async method return a deferred promise. Here is the signature of my function: static async GetMatches(input: string, loc?: LatLng):JQueryPromise& ...

A guide to simulating Custom Dialog in Angular for Unit Testing with Jest

Currently, I am in the process of creating test cases for unit tests and ensuring code coverage for a method that triggers a dialog component when isEdit = 'true' which is retrieved from localStorage. The issue arises with the first test case wh ...

Cypress error: Unable to access 'uid' property as it is undefined

Recently in my Cypress project with TypeScript support utilizing the Cucumber Preprocessor, an unexpected exception has started appearing: TypeError: Cannot read properties of undefined (reading 'uid') There are instances where changing to a di ...

What is the best way to transform an array of objects into a nested array through shuffling

I am dealing with a diverse array of objects, each structured in a specific way: data = [ { content: { ..., depth: 1 }, subContent: [] }, { content: { ..., depth: 2 ...

Automatic Slider for Ionic 4

I am having trouble getting the ionic slider to slide automatically, even though it contains images and the data is fetched from an API call. <ion-slides autoplay="5000" loop="true" speed="300" pager="true" > <ion-slide *`ngFor`="let ...

Delete row from dx-pivot-grid

In my current project, I am utilizing Angular and Typescript along with the DevExtreme library. I have encountered a challenge while trying to remove specific rows from the PivotGrid in DevExtreme. According to the documentation and forum discussions I fo ...

Issue with Typescript - Node.js + Ionic mobile app's Angular AoT build has encountered an error

Currently, I am in the process of developing an Android application using Node.js and Ionic framework. The app is designed to display random text and images stored in separate arrays. While testing the app on Chrome, everything works perfectly fine. Upon ...

Tips for managing an array of observable items

In my current project, I am working with an Angular application that receives a collection from Firebase (Observable<any[]>). For each element in this collection, I need to create a new object by combining the original value with information from ano ...

Problem arises when combining string manipulation and piping operations

I have an HTML code within an Angular 2.0 template that looks like this: <span> Total Employee {{employeeCount> 0 ? '(' + employeeCount+ ')' : ''}} ></span> My customFormatter function is able to take a val ...

Type with self-reference in index

Looking to create an interface with a mix of known and unknown members that should all have the same type. Here's what I have in mind: interface Foo { name?: string; [others: string]: Foo; } This setup would allow me to create something like ...

Testing for target instanceof window.Window in jest involves writing a test case using the expect keyword

I am currently working on a function in TypeScript that handles scrolling. Here is the code snippet with type definitions for reference... function scroll(target: HTMLElement, {posX, posY}: ScrollPosition): void { if (target instanceof window.Window) ...

The TypeScript generated definition file (.d.ts) is failing to work properly in conjunction with the typings specified in package.json

I've successfully created a definition file (d.ts) for my TypeScript project using the --declaration argument with the tsc compiler. However, when I attempt to publish the package with the typings property in the npm package.json, this generated defi ...

Is there a way to adjust the width of a table cell in Material UI using React?

I encountered a problem where I am attempting to adjust the width of a table cell, specifically in Typescript. However, I am only able to choose between medium and small sizes for TableCellProps. Is there a workaround for this issue? I am looking to expand ...

Designing the Firebase Structure of an Angular Application

What is the best way to structure Firestore and Angular for efficient querying? When using a JSON Cloud Firestore database, one of the challenges is inserting people and relating them to users. To optimize query speed and efficiency, it is important to c ...

Issue encountered while installing Angular 2 npm package

Encountering an error during the installation of Angular2 npm ERR! Windows_NT 10.0.14393 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\np ...

Performance challenges with rendering SVG in ngFor due to the presence of a highly nested array structure - in

I'm currently developing a business application that requires me to dynamically render SVG images for displaying floor plans. The SVG elements are stored in a database and provided to the front-end in JSON format, allowing the graphics to be rendered ...

Showcasing a badge counter within a tab

I am trying to implement a counter badge that shows the number of current packages uploaded next to its tab. However, I noticed that the badge only appears when I click on the tab. Ideally, it should automatically update and display the counter without nee ...

What is the best way to access dependencies that are externally defined in the root package.json file?

I'm unsure of the appropriate terminology for this concept. If you have the correct TERM to share or a reference for me to learn more about it, please provide the link. Currently, I am examining our extensive package.json file for various projects. ...

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

Why is the component failing to display the service model?

Within my parent component, I am retrieving filters from the Settings service: export class OrdersExecutionSidebarComponent { public get filters(): _Filter[] { return this.settings.filtersRepository.filters; } } The template for this se ...