Tips for retrieving a fetch result within a function

I am trying to retrieve the data from fetch and pass it back within this function in order to return the information to the original call made to this class and function. Unfortunately, I encountered this error message:

Type 'Promise<any>' is missing the following properties from type 'String[]': length, pop, push, concat, and 28 more.

export default class GetApiData {
    static getThemeParkData(): Array<String> {
        return fetch(
            url,
            {
                method: 'GET',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json'
                }
            }
        )
        .then((response) => { 
            return response.json()
        })
    }
}

Answer №1

It is advisable to follow JB Nizet's suggestion and update the return type of your method.

Change it from Array<String> to Promise<String[]> or even Promise<any>

export default class FetchDataFromApi {
  static retrieveThemeParkData(): Promise<any> {
    return fetch(
        url,
        {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            }
        }
    )
    .then((response) => { 
        return response.json()
    })
  }
} 

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

Angular Error: Unable to access the 'title' property of an undefined value

Error Message Showing on Console for post-create.component.html ERROR Message: TypeError: Cannot read property 'title' of undefined at PostCreateComponent_Template (template.html:13) I suspect the issue is related to this line - console.log(for ...

Converting an object into an array using React and TypeScript

Extracted from a form is an object with input, output, and outputType fields that can vary between number, string, and boolean types. To display the information in a table without the output type, I have created a mapped obj. However, I also need to prese ...

Can child components forward specific events to their parent component?

I created a basic component that triggers events whenever a button is clicked. InnerComponent.vue <template> <v-btn @click="emit('something-happened')">Click me</v-btn> </template> <script setup lang=" ...

Error in Angular Typescript: Utilize the return value of "filter" function to fix the issue

Encountering a sonar error: The return value of "filter" should be utilized Despite using the filter, the error persists. What might be the issue here? array.filter(item => { item.value.split(' ').forEach( i => { if ( doSomething(i) ...

What is the method for displaying an object within an HTML template by accessing its keys?

I need to display an object in a modal. When the read more button is clicked, it should send the title name and Amazon link to a function that will pass them to the modal. However, ngFor doesn't seem to display the object, and only one object is sent ...

The constant response is always "I'm unsure of the solution" regardless of the existing context and apparent data

I've been exploring a project that combines LangChain, Google's Generative AI model Gemini-1.5-pro, and Neo4j to create an advanced Q&A system. This system is designed to provide answers by querying a Neo4j graph database. While my setup is ...

Is there a way to expand the web part width to fill the entire screen in SPFx 1.10?

After setting up SharePoint framework SPFx 1.10 with React template, I ran it on https://localhost:4321/temp/workbench.html and attempted to enable full bleed width by adding "supportsFullBleed": true in the "WebPartName.manifest.json" file, but ...

Having troubles determining the boolean value depending on the selected radio button in HTML with Angular?

I have set up two radio buttons for Order and Cart in my app. I want to retrieve the value TRUE if the Order button is checked (which is the default) and FALSE if it is not checked, in the app.component.ts file using AngularJS. app.component.html <div ...

Retrieve information from a Firestore reference field and store it in an array

I am currently working with order data that includes user data and hotel data as references. As shown below, I have the following code to retrieve the data: this.orderService.getOrders().subscribe(result => { this.orders = result.map(e => { ...

Is ngrok from npm a secure tool to use?

During my search for a solution to connect to my localhost API on my android device, I discovered the tool called ngrok. I'm curious about the safety of using ngrok. What potential threats does it pose, if any? ...

The Cypress command has gone beyond the specified timeout of '8710 milliseconds'

I ran a test in Cypress that initially passed but then failed after 8 seconds with the following error: "Cypress command timeout of '8710ms' exceeded." Console log Cypress Warning: It seems like you returned a promise in a test and also use ...

Encountered an issue in React Native/Typescript where the module 'react-native' does not export the member 'Pressable'.ts(2305)

I have been struggling to get rid of this persistent error message and I'm not sure where it originates from. Pressable is functioning correctly, but for some reason, there is something in my code that doesn't recognize that. How can I identify t ...

How come the value passed to the component props by getServerSideProps is incorrect?

I have been facing an issue while trying to retrieve data from 4 different endpoints and then passing them as props using getServerSideProps in Next.js. Even though the "courses" variable returned from getServerSideProps does contain the necessary course ...

Angular 6 Error: Unable to access property 'e4b7...f' as it is undefined

I'm encountering an issue while trying to initialize an object based on a TypeScript interface. Even though I am assigning a value, I still receive an error stating that the property is undefined. interface ITableData { domainObjectName: string; ...

Images are failing to load in Ionic 3

Currently working on developing an Ionic application and troubleshooting the use of the camera native plugin. The script functions flawlessly in a fresh project, but encounters issues within the current project environment. Initially suspected a problem w ...

Issue: the module '@raruto/leaflet-elevation' does not include the expected export 'control' as imported under the alias 'L' . This results in an error message indicating the absence of exports within the module

Looking for guidance on adding a custom Leaflet package to my Angular application called "leaflet-elevation". The package can be found at: https://github.com/Raruto/leaflet-elevation I have attempted to integrate it by running the command: npm i @raruto/ ...

Fixing 404 Errors in Angular 2 Due to Component Relative Paths in SystemJS-Builder

I recently posted this on https://github.com/systemjs/builder/issues/611 My goal is to bundle my Angular 2 rc 1 application using systemjs-builder 0.15.16's buildStatic method. In my Angular component, there is a view and one or more external stylesh ...

Create a pinia state by defining it through an interface without the need to manually list out each property

Exploring the implementation of state management (pinia) within a single-page application is my current task. We are utilizing typescript, and I am inquiring about whether there exists a method to define a state based on an interface without needing to ret ...

Troubleshooting issue: Unable to locate library during testing with Nx, Jest, and Angular

In my nx monorepo, I have two apps (client, server) and 5 libraries (client-core, platform-core, etc). To include the libraries in the Angular client application, I set the paths in the tsconfig.json file. "paths": { "@myorg/platfo ...

The error message SCRIPT1003 is indicating that a colon was expected

There are many questions with this title, but I have a unique one for you. An error message "SCRIPT1003: Expected ':' (1,78)" pops up when I launch my website. I am using webpack and typescript in my project. Below is my tsconfig: { "co ...