Angular utilizes ZoneAwarePromise rather than a plain String output

I expected the giver code to return a string, but it is returning ZoneAwarePromise.

Within the service:

  getCoveredPeriod() {
    let loanDetails = this.getLoanDetails().toPromise();
    loanDetails.then((res: any) => {
      const coveredPeriodStart = new Date(
        res.coveredperiodstartdate
      ).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      const coveredPeriodEnd = new Date(
        res.coveredperiodenddate
      ).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      this.coveredPeriod = `${coveredPeriodStart} to ${coveredPeriodEnd}`;
      return this.coveredPeriod;
    });
  }

Within the component:

  coveredPeriod: any;

  this.coveredPeriod = this.basicFormsService.getCoveredPeriod()

I was expecting this.coveredPeriod to be of type string, but I am getting:

ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: undefined}
__zone_symbol__state: true
__zone_symbol__value: undefined
Symbol(Symbol.species): (...)
Symbol(Symbol.toStringTag): (...)
__proto__: Object

Answer №1

Could you please attempt the following:

  fetchCoveredPeriod() {
    let loanInfo = this.fetchLoanInfo().toPromise();
    return loanInfo.then((res: any) => {
      const periodStart = new Date(
        res.coveredperiodstartdate
      ).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      const periodEnd = new Date(
        res.coveredperiodenddate
      ).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      this.period = `${periodStart} to ${periodEnd}`;
      return this.period;
    });
  }

After that, execute

this.period = await this.basicFormsService.fetchCoveredPeriod()

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

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs. <div class="card" data-lesson="eyes">eyes</div> <div class="card" data-lesson="torso">torso</div> <div class="card" ...

Typescript Next.js Project with Custom Link Button Type Definition

I have a project that includes a custom Button component and a NextLink wrapper. I want to merge these two components for organization purposes, but when I combine the props for each, I encounter an issue with spreading the rest in the prop destructuring s ...

Creating a dynamic className string in JavaScript with React

In my current project, I'm implementing mobile support by creating separate styles for desktop and mobile. Although most components are the same on both platforms, I have two .scss files dedicated to each. To apply the correct styles, I use a combina ...

Utilizing jQuery to attach events to dynamically generated elements

I have a scenario where I am uploading multiple images and inserting them into specific div elements. These divs should toggle a class when clicked. Should I include the part of code that adds the onclick event inside the ajax success function? Your help i ...

What causes the discrepancy in the expiresIn value of my JWT when it is transmitted from the server to the front-end?

After setting the token expiry date on the server, I decided to log out the value to double-check it. However, upon checking the value on my React front-end, I noticed a significant change in the value received compared to what was sent from the server. Is ...

Understanding how to utilize and manipulate this JSON data using JavaScript

In my code, there is a variable that contains the following data: { "Rows": [ { "New":1, "CachedNumberType":0, "Date":1327479615921, "Type":2, "Number":"123456", "Duration ...

Guide on creating an autonomous select-all checkbox to show table columns

How can I create checkboxes with a "Select all" option and the following functionality: Check one or more checkboxes to show specific table columns. Uncheck them to hide the columns (toggle). Select the "Select all" checkbox to display all table columns. ...

What is preventing me from retrieving these JSON values?

One of the functionalities on my website involves making an AJAX call to retrieve a member's profile information for editing purposes. The code snippet responsible for this operation is shown below: function loadProfileData() { var ...

Managing numerous API requests in React Native

As I work on implementing a search field, I've encountered a challenge. Whenever a user enters text in the search field, a timer resets to 300 ms before an API call is sent to fetch autocomplete results. After receiving these results, the app then wai ...

The importance of using clearTimeOut in debounce function

Could you explain the importance of using clearTimeout in debounce function? Let's take a look at the code below: const saveInput = (name) => { console.log('saveinput ', name); } const debounce = (fn, timeout = 3000) => { ...

Adding to the beginning of a list in JQuery mobile

Having trouble figuring out how to prepend my list in jQuery mobile while keeping the divider on top of the most recent item added. I attempted to prepend the newly added item, but it ended up shifting the divider to the bottom instead. function loadScan ...

What is the necessity of explicitly requesting certain core modules in Node.js?

The documentation explains that certain core modules are included in the Node.js platform itself and are specified within the source code. The terminology can get a bit confusing when it comes to details. The term "global objects" (or standard built-in obj ...

The Proper Method of Displaying Data from a JSON File Using AngularJS

I'm having trouble getting the data from a JSON file (click on the "Json File" link to view the structure). I'm not sure what to put after "$Scope.listOfRecipe=". I tried using response.data.recipes, but it's not working and causing errors. ...

Protecting Node.js Files

As I prepare to embark on creating a new website, my main goal is to collect form input values such as dropdowns and radio boxes from the client without requiring user accounts. These values will be used for sensitive calculations, making security a top pr ...

I am having trouble adding multiple items on different occasions - is it something to do with JQUERY

I have been working on a dynamic website that loads Firebase values into a table. However, I encountered an issue where the data does not appear when going back to the orders page after visiting another page. After some testing, I found that placing a but ...

Using TypeScript and webpack, include the access_token in the http header when making requests with axios

I need to include an access_token in the header of axios, following this example: https://github.com/axios/axios#global-axios-defaults Currently, I am fetching the access_token using razor syntax, which is only accessible in CSHTML files. https://github ...

Utilize a JavaScript function on an element that is generated dynamically

I am encountering an issue with my autocomplete function. It works perfectly fine for the input field with the id "field10" that is already created. However, when I dynamically generate new input fields, the function does not seem to work on them. I have ...

JavaScript Deviance

I am facing an issue with my JS code while trying to send form data to a .php file via AJAX. The problem occurs when the input fields are filled - for some reason, my client-side page refreshes and the php file does not get executed. However, everything wo ...

Is it possible to utilize AJAX to load the URL and then extract and analyze the data rather than

I had originally created a web scraping method using PHP, but then discovered that the platform I was developing on (iOS via phone gap) did not support PHP. Fortunately, I was able to find a solution using JS. $(document).ready(function(){ var container ...

How to disable typescript eslint notifications in the terminal for .js and .jsx files within a create-react-app project using VS Code

I'm currently in the process of transitioning from JavaScript to TypeScript within my create-react-app project. I am facing an issue where new ESLint TypeScript warnings are being flagged for my old .js and .jsx files, which is something I want to avo ...