A guide on retrieving data from Promises in Angular

After executing a promise, I am looking to access the data that is returned as a JSON hashmap. Each key and its corresponding value needs to be displayed in separate dialog boxes:

I have attempted to access the data using the following method:

component.ts :

openDialog(emaildialog){
   this.emailservice.getByEmailType(this.choice).then((emails: any) => {
      this.etext = emails.responsive;
      console.log(emails.responsive);
      let ref = this.dialog.open(emaildialog, {    
         data: emails.responsive,
         width: "600px",
         height: "600px",
      });
   });
}

service.ts:

constructor(private http: HttpClient) { }

getByEmailType(id:String) {
   return this.http.get<Email>(this.baseUrl+'/'+id).toPromise();
}

The API in Springboot backend returns the following data:

return new ResponseEntity<Object>(Collections.singletonMap("responsive",hmap), HttpStatus.OK);

The returned JSON appears as follows:

{
   "responsive": {
      "email3": "hello to email3",
      "email2": "hello to email2",
      "email1": "hello to email1",
      "email5": "hello to email5",
      "email4": "hello to email4"
   }
}

To display each email type with its corresponding value, I need to showcase them in individual dialog boxes.

Answer №1

Could this be the solution you need?

For every email in the responsive folder, open a dialog box with the email data displayed:
Object.keys(emails.responsive).forEach(e => {
      let ref = this.dialog.open(emaildialog, {    
         data: emails.responsive[e],
         width: "600px",
         height: "600px",
      });
});

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

Troubleshooting the ineffectiveness of RegExp object in finding and replacing

I have been attempting to substitute values in a string template using the following method: for (var i in replacements) { var regexp = new RegExp('\$\{' + i + '\}', 'g'); template = template.replace(re ...

Adding a condition to the react-router v6 element: A step-by-step guide

I am currently in the process of updating my project from v5 to v6 of react-router-dom. However, I have encountered an issue. Everything was working fine in v5 <Route path={`${url}/phases/:phaseIndex`}> {(chosenPhase?.type === PhaseTy ...

Troubleshooting issue in Typescript with useFieldArray relating to property name

I am encountering an issue with useFieldArray in TypeScript. The problem arises when trying to specify the controller's name as: name={test.${index}.firstname} The error message reads: controller.d.ts(18, 5): The expected type comes from property &ap ...

Error in Angular6: Why can't handleError read injected services?

It appears that I am facing an issue where I cannot access a service injected inside the handleError function. constructor(private http: HttpClient, public _translate: TranslateService) { } login(user: User): Observable<User> { ...

Transferring Cookies through FETCH API using a GET method from the client-side to the server-side

Struggling with a challenge here: Attempting to send a cookie via a GET request to determine if the user is logged in. The cookie is successfully transmitted to my browser and is visible in the developer tools. When I manually make a request through the UR ...

Using Typescript: invoking static functions within a constructor

This is an illustration of my class containing the relevant methods. class Example { constructor(info) { // calling validateInfo(info) } static validateInfo(info):void { // validation of info } I aim to invoke validateInfo ...

Error: Unused variable: '_' has been declared but not utilized

While working on my Next.JS project with TypeScript, I encountered an issue when trying to run the build. The error message stated: Type error: '_' is declared but its value is never read. I attempted to resolve this by setting "noUnusedLocals" ...

Tips for adjusting the size of a modal window in Ionic 3

Need help customizing the appearance of a modal alert in my app. Here's my current function: customizeModal() { const myModelOpts: ModalOptions = { showBackdrop: false, enableBackdropDismiss: false } const myData = { pa ...

What is the best way to connect a series of checkboxes within a form utilizing Angular?

I created a form with checkboxes that allow users to select multiple options. However, when I submit the form, instead of receiving an array of objects representing the checked checkboxes, I'm not getting anything at all. Here is what I see in the co ...

Child component in Angular fails to detect input changes

Hey there! I'm currently utilizing parent-child communication in my Angular project. In the parent component, I have an array that represents graph data. If you'd like to check out a demo of what I'm working on, feel free to click here. The ...

Switching Angular fxLayout from row to column based on a conditional statementHere is an explanation of how to

Visit this link for more information Is there a way to set direction based on a specific value? <div if(value) fxLayout='row' else fxLayout='column'> ...

I am seeking guidance on how to manually provide data to an rxjs observable. Can anyone help me with this basic question?

I am interested in using an observable to communicate "exceptional states" to different parts of my Angular application, but I am struggling to grasp their functionality. In the code snippet below, I have created an observer object and turned it into an o ...

Experiencing problems with the Locale setting when utilizing the formatNumber function in Angular's core functionalities

I am having trouble formatting a number in Angular using the formatNumber function from the Angular documentation. Here is my code snippet: import {formatNumber} from '@angular/common'; var testNumber = 123456.23; var x = formatNumber(Numb ...

Error with React Query Mutation and TypeScript: The argument '{ surgeryID: any; stageTitle: any; }' cannot be assigned to a parameter of type 'void'

Utilizing react-query for fetching and posting data to my database on supabase has been really helpful. I took the initiative to create a custom hook specifically for adding records using react-query: export function useAddSurgeryStage() { const { mutate ...

When attempting to parse the request body in a POST request using Koa on Firebase Cloud Functions, the request hangs and times out

I am currently developing a small website and hosting static files using Firebase Hosting (FH). All requests are being redirected to a single function on Firebase Cloud Functions (FCF), where I am utilizing Koa framework with koa-router to handle the reque ...

Error: Unable to load the parser '@typescript-eslint/parser' as specified in the configuration file '.eslintrc.json' for eslint-config-next/core-web-vitals

When starting a new Next.js application with the specific configuration below: ✔ What name do you want to give your project? … app ✔ Do you want to use TypeScript? … No / [Yes] ✔ Do you want to use ESLint? … No / [Yes] ✔ Do you want to use T ...

Unable to import LocalizeRouterModule class during Angular migration

Currently in the process of migrating from Angular 8.2 to 9.1.13, everything seems fine with the compiler, but upon loading the page, all I see is a blank screen. The console outputs an error and after some debugging, I discovered the issue lies within my ...

Angular 2/webpack error: Unable to find require reference

I have integrated an HTML template from a graphic design company into my Angular 2 project using node and webpack. This HTML template includes various scripts like: <script src="js/jquery.icheck.min.js"></script> <script src="js/waypoints. ...

Avoiding page refresh while utilizing the ng5-slider component in Angular

I am currently working with an ng5-slider that has a customizable range from 0 to 1000. However, I have encountered an issue when adjusting the slider at the bottom of the page - it refreshes and automatically takes me back to the top of the page. I would ...

Make sure to declare rest parameters first when using Typescript

I am dealing with a function that takes in multiple string arguments and one final argument of a complex type, which is called Expression. This particular code looks like this in JavaScript: function layerProp(...args) { const fields = args.slice(0, -1) ...