The 'BaseResponse<IavailableParameters[]>' type does not contain the properties 'length', 'pop', etc, which are expected to be present in the 'IavailableParameters[]' type

After making a get call to my API and receiving a list of objects, I save that data to a property in my DataService for use across components.

Here is the code snippet from my component that calls the service:

  getAvailableParameters() {
     this.verificationService.getAvailableParameters(this.itemNumbers).subscribe((res => {
      this.dataService.availableParameters = res;
    }))}

This is the API call:

  getAvailableParameters(itemNumbers: string[]){
    return this.http.get<BaseResponse<IavailableParameters[]>>(`${this.baseUrl}api/verification/${itemNumbers}`)
  }

Below is the property in the DataService where the object should be stored after calling getAvailableParameters:

export class DataService {
  public orderInfo: Iorder;
  public availableParameters: IavailableParameters[];
}

The response from the API is wrapped in a BaseResponse object, which might be causing issues, defined here:

import { Error } from './Error'

export interface BaseResponse<T> {
    isSuccessful: boolean,

    error: Error;

    results: T;
}

Currently, I am encountering this specific error:

    ERROR in src/app/Components/verification-reply/verification-reply.component.ts(28,7): error TS2740: Type 'BaseResponse<IavailableParameters[]>' is missing the following properties from type 'IavailableParameters[]': length, pop, push, concat, and 26 more.

If I remove the base response type, everything works fine, indicating that it may not recognize it as an array. This method of binding to the data service object worked well when the returned object was not an array.

As someone new to this topic, I would appreciate some guidance on resolving this error.

Answer №1

By removing the base response type, you can see that it functions correctly. It seems like the system doesn't recognize it as an array.

This is an expected outcome because

BaseResponse<IavailableParameters[]>
is not actually an array. It is an object with attributes such as isSuccessful, error, and results. The property results is where you will find an array of IavailableParameters[].

Ensure that the type you are passing to this.http.get matches what is returned from the request. Is it truly an array of IavailableParameters? Or is it an object with isSuccessful, error, and results?

If your variable response is defined as

BaseResponse<IavailableParameters[]>
but you attempt to treat it as an array IavailableParameters[] (as seen in the error message), then simply access just the response.results rather than the entire response object.

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

Extracting information from Timeless-time-picker utilizing form control

<timeless-time-picker [hourFormat]="'hours24'" [visibleItemsCount]="3" [size]="'medium'" [theme]="'dark'" [selectionHighlightStyle]="'none'" [selectionBoxBackgro ...

Attempting to streamline this function in order to avoid running it nine separate times

I have created a day scheduler and successfully saved data in local storage for one hour field. However, I am looking for a way to streamline this function so that I can use it across all 8-hour fields without duplicating the code. Can someone provide me w ...

Ways to restrict data types within function parameters

Can you validate types of one argument based on another argument in functions? Consider this example: interface Data { id?: number; name?: string; } let data : Data = {}; // I am unsure how to make the "value" argument strict function update(field : ...

I encountered a sudden halt in functionality with my NextJs useState feature

'use client' import React, { useState } from 'react'; import Image from 'next/image'; export default function Home() { const [count,setCount] = useState<number>(0) const add = ()=> { setCount(prevCount => ...

Exploring the possibilities of using React for looping?

I have integrated Dexie.js with React for this specific example. However, the implementation details are not of great importance to me. My main focus is on finding out how to iterate through all objects in my IndexDB database using React. In the code snip ...

Activate function on Ctrl + K in a React TypeScript project

I am currently developing a React TypeScript application using version v18.2.0. My goal is to trigger a function when the user simultaneously presses Ctrl + K. Here is the code snippet within my component: const keyDownHandler = (event: KeyboardEvent) =& ...

No contains operator found in Material UI Datagrid

While working on a project, I utilized Material UI's datagrid and successfully implemented filters such as contains and isEmpty. However, I am struggling to find information on how to create a notContains filter. Does Material UI natively support this ...

When {} = {} is utilized in an Angular constructor, what is its function?

While going through an Angular dynamic forms tutorial, I came across this code snippet and got confused by the {} = {} in the constructor. Here is the complete snippet: export class QuestionBase<T> { value: T; key: string; label: string; re ...

Utilizing an Angular component for multiple purposes

For my Angular app, which is component-based and uses Angular version 1.5.5 with TypeScript, I have a header component that includes a country dropdown. This header component is used across multiple pages. However, when a country is selected from the dropd ...

What is the most effective method for parsing a JSON object with a dynamic object name?

Is it possible to access specific object keys and perform actions based on the object name retrieved from a JSON object? If so, how can I achieve this? The JSON object 'x' will be fetched through an AJAX call from the server. Depending on the ob ...

Issue with retrieving URL parameters in Nextjs during server side rendering

Currently, I'm attempting to extract the request query, also known as GET parameters, from the URL in server-side rendering for validation and authentication purposes, such as with a Shopify shop. However, I am facing issues with verifying or parsing ...

Establishing a connection to an API with basic authentication in Angular 8 and Express JS

After setting up my angular 8 app and connecting it to an express API, I decided to run it locally for testing purposes. The front end of the app connects to http://localhost:4200/, while the backend connects to http://localhost:3000/. Additionally, I crea ...

What's the most efficient way to iterate through this Array and display its contents in HTML?

I'm struggling to sort a simple array and I think the issue might be related to the time format. I'm not sure how to reference it or how I can properly sort the time in this array format for future sorting. //function defined to input values ...

Ensure the variable is valid by using a type guard in the false branch

I am attempting to use a type guard to narrow down a complex type. In my scenario, I want the false branch of the type guard to recognize the complement of the narrowed type. interface Model { side: 'left' | 'right'; } interface LeftMo ...

How to modify attributes using ng-content in Angular 2

Looking for a way to modify the attribute of the top div within the ng-content in my code. Here's an example snippet: <ng-container> <ng-content select="[content-body]"></ng-content> </ng-container> For instance, I want t ...

Configuring IIS routing for seamless integration with Angular routing

After deploying my front-end Angular application on an IIS server and my back-end ASP.NET web API application on a separate server, I encountered an issue. Even though I can access the web page when visiting the Angular application's URL and navigate ...

Sending URL parameters from a React frontend to an Express API call involves crafting the request URL with

I'm currently working on a project where I need to make a fetch request from React to Express. The API URL requires parameters, but I want the last part of the URL to be dynamic. How can I pass a parameter from React to the Express API URL? Here' ...

Limit the outcomes of the Ionic timepicker

Currently, I am utilizing the ionic datetime feature. However, instead of receiving just the hours, minutes, and seconds, the result I am getting looks like this 2020-10-05T00:00:27.634+07:00. What I actually require from this output is only 00:00:27. Is ...

Error in TypeScript: Module 'stytch' and its corresponding type declarations could not be located. (Error code: ts(2307))

I'm currently developing a Next.js application and encountering an issue while attempting to import the 'stytch' module in TypeScript. The problem arises when TypeScript is unable to locate the module or its type declarations, resulting in t ...

Validation of phone numbers based on country codes

How can I validate phone numbers based on the selected country in Angular? Are there any Angular packages specifically for this task? I've attempted to use regex, but it only works for certain countries. I need a solution that can validate mobile an ...