The input of type 'Object' cannot be assigned to the specified 'Interface' parameter

fetchCurrenciesData(): currencyInterface[]{
    let currencyArray: **any**[] = [];
    this.http
      .get(`${this.url}?from=${this.currency1}&to=${this.baseCurrency}&amount=1&places=2`)
      .subscribe(response => currencyArray.push(response))
    this.http
      .get(`${this.url}?from=${this.currency2}&to=${this.baseCurrency}&amount=1&places=2`)
      .subscribe(response => currencyArray.push(response))
    return currencyArray
  }

I am attempting to update the type of elements in my array from any to currencyInterface, but I am encountering an issue involving the title on each "res". How can I resolve this?

angulartypescript

Answer №1

When utilizing the get method of http, it is possible to pass a generic type.

The outcome:

getHeaderCurrencies(): currencyInterface[] {
    const array: currencyInterface[] = [];

    this.http
      .get<currencyInterface>(`${this.url}?from=${this.currency1}&to=${this.baseCurrency}&amount=1&places=2`)
      .subscribe(res => array.push(res))
    this.http
      .get<currencyInterface>(`${this.url}?from=${this.currency2}&to=${this.baseCurrency}&amount=1&places=2`)
      .subscribe(res => array.push(res))

    return array
}

In addition, since HTTP calls are being made, they can be easily converted into promises using the Observable.prototype.toPromise() method, resulting in:

async getHeaderCurrencies(): Promise<currencyInterface[]> {
    const c1 = this.http
      .get<currencyInterface>(`${this.url}?from=${this.currency1}&to=${this.baseCurrency}&amount=1&places=2`)
      .toPromise()
    const c2 = this.http
      .get<currencyInterface>(`${this.url}?from=${this.currency2}&to=${this.baseCurrency}&amount=1&places=2`)
      .toPromise()

    return Promise.all([c1, c2])
}

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

Ways to retrieve a URL from the assets folder

I need to establish a baseUrl for my backend requests within the assets folder. For this, I have created a server configuration file named config.json { "backendServer": { "protocol": "http", "host": " ...

angulartypescriptassets

Obtain pictures from MongoDB for a website using Angular6

I'm currently in the process of developing my website and I want to showcase an image from my database on the header. Each customer is assigned a unique logo based on their ID, but I'm unsure how to use Angular to display it. Below is my code s ...

htmlangularimageangular6

Encountering an error with loading in Angular may require a suitable loader

I am currently working on integrating an AWS QuickSight dashboard into an Angular application. For implementation in Angular, I am referring to the following URL: https://github.com/awslabs/amazon-quicksight-embedding-sdk Could someone provide me with sa ...

node.jsangulartypescriptaws-sdkangular-components

How can we ensure that the slider thumb label is always shown in Angular 16 Material components?

Is there a way to display the thumb label constantly on a material slider? The solution mentioned above does not seem to work with Angular 16 material UI slider. Could you kindly offer an alternative solution for this issue? ...

javascriptcssangularangular-material

Acquire data from promise using an intermediary service in Angular 5

I'm facing an issue with retrieving promise data through an intermediate service. The setup involves a component, an intermediate service, and an HTTP service. My component makes a call to the intermediate service, which then forwards the request to ...

angular

Simulated static functions are invoked within the main function under evaluation

Looking to mock certain functions within a function I'm currently testing. In my code, there is a class with various static private functions that are called by the main function. Specifically, I want to verify the output of MyClass.functionD (which ...

javascripttypescriptunit-testingjestjsmocking

Loop through a JSON object in TypeScript and extract each element from the JSON

I am still learning TypeScript and trying to accomplish a rather simple task, however the documentation does not provide guidance on how to iterate over JSON data. My goal is to loop through a JSON response array and insert a JSON object into each elemen ...

jsonangulartypescriptwebstorm

Drop the prohibited cursor before dragging

https://i.sstatic.net/WIBWr.jpg Is there a way to change the cursor behavior during element drag using HTML5 default drag and drop with TypeScript? I have tried various methods like changing from ev.target.style.cursor to "grab" cursor, adjusting dropEffe ...

htmlangulardrag-and-dropdrag

Encountered an NPM installation error: JSON input unexpectedly ended while parsing near '...nt-webpack-plugin":"0'

While setting up a fresh Angular 5 project: node version: 8.9.2 npm version: 5.5.1 Here is the command I used: npm install -g @angular/cli This is the error I encountered: npm ERR! **Unexpected end of JSON input while parsing near '...nt-webpack-p ...

node.jsangularnpmnpm-install

The functionality allows users to scan multiple barcodes simultaneously and will display the results on the screen once the scanning is complete and save the results for future reference

I'm currently developing a mobile barcode scanning app using Ionic 3, targeting Android and iOS devices. However, I've encountered a roadblock. Originally, the app was designed to scan and display one product barcode. Now, a new requirement has b ...

angulartypescriptionic-framework

Encountering an issue with receiving incorrect values when subscribing in Angular

Looking at this function that checks for the existence of a code in the database: isCodeExist(code: string): Observable < boolean > { return <Observable < boolean >> this.afs .collection(this.jobsCollection, ref => ref .wh ...

angularrxjsangular6

Why is my index.tsx file not properly exporting? (React + Typescript)

I've developed a basic Context Provider that I'd like to package and distribute via npm. To package my code, I utilized the create-react-library tool. In my project, I've set up an index.tsx file that should serve as the entry point for im ...

javascriptreactjstypescriptnpm

Leveraging a shared library in Typescript

How can I efficiently share code between different codebases that are all written in TypeScript and constantly being developed? I am seeking a straightforward solution. Some of the methods I have attempted include: 1 Utilizing import statements with path ...

gittypescriptnpm

Issue with Angular 5: Data not being correctly bound following a redirect

Encountering an issue with data binding when redirecting from one view to another. I am inputting form data in the "http://localhost:4200/create" view and then navigating to "http://localhost:4200/settle/9ed5509c-ecd6-4895-96eb-a2efa04bae6d" (URL with toke ...

angularangular5angular-routing

Running Angular 2 on a device without internet connection

I am eager to begin my journey working with Angular2 and angular-cli on a computer that will be offline. On my current connected computer, I have successfully installed angular-cli. Can someone guide me on what specific files or data I should transfer on ...

angularangular-cli

Steps for converting TypeScript code to JavaScript using jQuery, without the need for extra libraries or frameworks like NPM

My single-page dashboard is quite basic, as it just displays weather updates and subway alerts. I usually refresh it on my local machine, and the structure looked like this: project/ index.html jquery-3.3.1.min.js script.js I decided to switch it t ...

javascriptjquerytypescripttsc

The output from Typescript Box results in a union type that is overly intricate to illustrate

Encountering an error while trying to render a Box: Received error message: Expression produces a union type that is too complex to represent.ts(2590) Upon investigation here, it seems that this issue arises from having both @mui/material and @react-thr ...

reactjstypescriptthree.jsmaterial-uireact-typescript

Obtain the property value from an Angular 6 HTTP response object

I've been on the lookout, but I just can't seem to find a solution that works for me. So, here's the situation: I have an http post service where I receive responses in object format. My code currently looks like this: data.subscribe(data ...

angulartypescript

Why styled-components namespace problem in React Rollup build?

I designed a "UI Library" to be utilized in various projects using ReactJS + TypeScript + styled-components and Rollup. However, I am currently encountering issues with conflicting classNames. I am aware that styled-components offers a plugin for creating ...

javascriptreactjstypescriptstyled-componentsrollupjs

Exploring Angular's ability to utilize the Map and Subscribe functions within an

I could use some assistance with RxJS. I have a piece of code that is supposed to fetch an API and then, for each returned element, retrieve the type of that element from another API. The code is functioning properly, but it returns an Observable for the ...

angularrxjs