Getting a string output from a Typescript promise

Here is some Typescript code that I thought would be simple. 

public showDialog(theNickname: string): string {          
        var req = {
            method: 'POST',
            url: '/Q/GetUserDetails',
            data: { nickname: theNickname }
        }
        this.$http(req).then((response) => {

            var c = "Nickname: " + response.data.Nickname + "<br/>";
            c = c + "Score: " + response.data.Score + "<br/>";
            c = c + "Followers: " + response.data.Followers + "<br/>";              
            return c;               

        });

    }

The issue is that it's not returning the string value because it is being returned as a promise. I am trying to find a solution without using a timeout function. How can I get the string value to return properly? This code is being called from an Angular function within the html.

public showDialog(theNickname: string): any {

When I change it to this, it still doesn't work. This code is specifically for use in a UI.Bootstrap Popover.

Thank you!

typescript

Answer №1

A great suggestion is to utilize Async/Await along with the Paleo solution:

async function openDialog(nickname: string): Promise<string> {          
        const request = {
            method: 'POST',
            url: '/Q/GetUserDetails',
            data: { nickname: nickname }
        }
        const responseData = await this.$http(request);
        return `Nickname: ${responseData.data.Nickname
            }<br/>Score: ${responseData.data.Score
            }<br/>Followers: ${responseData.data.Followers}<br/>`;
}   

async function performAction() {
    const messageToShow = await openDialog("TEST");
    alert(messageToShow);  
}

Explore it further here

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 creating a page component in Next.js using props?

I've encountered an issue while trying to properly annotate the parameters of the Home function component. My initial attempt was to use: { events }: { events: Event[] }, but TypeScript is throwing an error, stating that Property 'events' do ...

reactjstypescriptnext.js

Troubleshooting: Icon missing from React vscode-webview-ui-toolkit button

In the process of developing a VSCode extension using React and the WebUi Toolkit library for components, I encountered an issue with adding a "save" icon to my button. I diligently followed the documentation provided by Microsoft for integrating buttons i ...

reactjstypescriptvisual-studio-codeiconsvscode-extensions

Merge rxjs streams, identify modifications, and yield a single result

In the context of using Angular with .net Core WebApi, let's consider the development of a time management application designed to monitor task durations. The user initiates a task on the front end which triggers a timer displaying elapsed time. The ...

javascripttypescript.net-corerxjsngrx

error TS2304: The term 'MediaRecorder' is not recognized

How can I add audio recording capability to my Angular application using media recorder? Unfortunately, I am encountering the following error: Error TS2304: 'MediaRecorder' cannot be found If anyone knows a solution for this issue, your help w ...

javascriptangulartypescriptmediaaudio-recording

Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Scenario: I am developing a time picker component for Angular 2. I need to pass values from Angular 2 Components to the jQuery timepicker in order to set parameters like minTime and maxTime. Below is the code snippet: export class TimePicker{ @Input() ...

javascriptjqueryangulartypescript

Having an issue where the Material Angular 6 DatePicker is consistently displaying my selected date as one day earlier

I've encountered a strange issue with the current version of the Material Angular DatePicker. After upgrading from A5 to A6, it started to parse my date one day earlier than expected. You can see an example of this problem here: https://stackblitz.com ...

angulartypescriptdatepickerangular-material

Reduce the use of if statements

Is there a way to optimize this function by reducing the number of if statements? The currentFeatures are determined by a slider in another file. The cost is updated if the currentFeatures do not match the previousFeatures, and if the user changes it back ...

javascriptreactjstypescript

Registering a function for chart.js plugins that manipulates external data

Is there a way to pass external data to the chart.plugins.register function? I'm struggling because I can't access the necessary context: Chart.plugins.register( { beforeDraw: function (chart) { //implementation } }); I attempted using ...

javascriptangulartypescriptchart.js

Utilizing a function as a prop with varying parameter types in React using Typescript

I am encountering an issue while attempting to pass a function that updates state in React. VSCode is prompting me with a typing problem. The error message states Type '(value: string) => void' is not assignable to type '(value: string | ...

reactjstypescriptreact-typescript

Is there a way to navigate to a specific slide number in the nz-carousel using the goTo(slidenumber) function? I'm interested in jumping directly

Here is the ng-zorro link for your reference: ...

typescriptcarouselangular8ng-zorro-antd

Creating a different type by utilizing an existing type for re-use

Can you help me specify that type B in the code sample below should comprise of elements from interface A? The key "id" is mandatory, while both "key" and "value" are optional. interface A { id: string; key: string; value: string | number; } /** ...

typescript

Personalizing Dialog Title in material-ui

While delving into the world of React and Material-UI, I encountered a challenge in updating the font color in the DialogTitle component. After browsing through various resources, I came across a helpful link that suggested overriding the dialog root class ...

reactjstypescriptmaterial-ui

What is the best way to repurpose a variable in Angular's TypeScript?

I'm currently working on an application that utilizes the following technologies. In my Typescript file named "test.page.ts", there is a variable called "response: any" that I need to reuse in another Typescript file named "test2.page.html" by calling ...

angulartypescript

amChartv5 on Angular is successfully displaying a Gantt chart that includes multiple categories with the same name being resolved

I've been working on integrating an amCharts v5 gantt chart with Angular 13. Each bar in the chart represents a project, and if there are multiple occurrences of a category, they should stack like a timeline. I've successfully retrieved data from ...

angulartypescriptamchartsgantt-chartstacked-chart

Creating an Array in TypeScript

Is it possible to declare a global array in Typescript so that it can be accessed using "this" from any part of the code? In javascript, I would typically declare it as "var anArray=[]". What is the equivalent way of doing this in Typescript? Using anArra ...

typescript

Allow exclusively certain type to pass through the function

Is it possible to receive an error message from the function in the following example? I have included comments at a relevant spot in the code below: interface Pos { x: number, y: number, } function doSome(pos: Pos) { return pos.x + pos.y } let p ...

typescript

Leveraging cloud functions on Firebase for maximum efficiency

Question: Do you require a backend language when using Firebase Cloud Functions, or can TypeScript alone suffice for coding tasks like creating a matchmaking system? Response: There seems to be some uncertainty on the matter even from ChatGPT himself. Is ...

angulartypescriptfirebasegoogle-cloud-functionsmatchmaking

The testString's dependencies are unresolved by Nest

Encountered Problem: Facing the following issue while running a unit test case Nest is unable to resolve the dependencies of the testString (?). Please ensure that the argument SECRET_MANAGER_SERVICE at index [0] is available in the context of SecretMa ...

typescriptdependency-injectionnestjs

Angular 6 - Accessing grandparent methods in grandchild components

I am in need of running the functions of the grandparent component: import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.cs ...

angulartypescriptrxjs

In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Currently, I am facing an issue with a filled variant TextField from Mui React. I have tried to modify it using theme components, but the placeholder text becomes hidden when the field is not focused. See here for Before Focus And here for On Focus I hav ...

cssreactjstypescriptmaterial-uiplaceholder