Generate personalized fields for Interface based on the Response Received

In my SPFX web part, the web service I am calling has properties that start with numbers: 30DaysTotal, 60DaysTotal, and 90DaysTotal.

To handle this, I have defined an Interface as follows:

export interface ISummary {
    Id : number;
    "30DaysGrandTotal": number;
    "60DaysGrandTotal": number;
    "90DaysGrandTotal": number;
}

Upon conducting some research, I discovered that adding speech marks around the variables makes them acceptable.

I then used the standard method out of the box to retrieve the values:

this.context.aadHttpClientFactory
      .getClient('('*********************',')
      .then((client: AadHttpClient): void => {
        client
          .get('*********************', AadHttpClient.configurations.v1)
          .then((response: HttpClientResponse): Promise<ISummary> => {
            return response.json();
          })
          .then((summary: ISummary): void => {

            console.log(summary);
            
             let summaryList: string='';

            summaryList = `
              <li>${summary.Id}</li>
              <li>${summary.30DaysGrandTotal}</li>
              <li>${summary.60DaysGrandTotal}</li>
              <li>${summary.90DaysGrandTotal}</li>              
             `;

            this.summaryDetailsElement.innerHTML = `
              <div name="summary" id="summary"><ul>${summaryList}</ul></div>`;
          });
      });

However, I encountered errors when trying to build the solution due to the variables:

[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,28): error TS1005: '}' expected.
[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,31): error TS1005: ';' expected.
[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,46): error TS1005: ',' expected.
[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,47): error TS1110: Type expected.
[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,48): error TS1161: Unterminated regular expression literal.

If I remove the three lines containing these variables, the code builds successfully, and the summary Class with values is logged in the console.

My query now is what modifications are needed for the variables to allow the code to be built without errors?

Answer №1

It was right in front of me all along, how did I miss that? :)

<li>${summary["30DaysGrandTotal"]}</li>

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

Database records failing to update after deployment

After deploying my next js site using Vercel, I encountered an issue with the functionality related to adding, getting, editing, and deleting data from MongoDB. Although all functions were working perfectly locally, once deployed, I noticed that while I co ...

What is the process for expanding types for a section element in Typescript?

When working with TypeScript, we define our component props types by extending a div like so: import { HTMLAttributes } from "react"; export interface IContainerProps extends HTMLAttributes<HTMLDivElement> { // Additional custom props for the c ...

Incorporating external Angular 4 components within my custom components

For my project, I am attempting to incorporate jqWidgets Angular components: import { Component, ViewChild } from '@angular/core'; import 'jqwidgets-framework'; import { jqxTreeComponent } from "jqwidgets-framework/jqwidgets-ts/angula ...

Exploring the TypeScript Type System: Challenges with Arrays Generated and Constant Assertions

I am currently grappling with a core comprehension issue regarding TypeScript, which is highlighted in the code snippet below. I am seeking clarification on why a generated array does not function as expected and if there is a potential solution to this pr ...

Using TypeScript to patiently wait for an observable or promise to complete before returning an observable

As a newcomer to TypeScript & RxJS, my goal is to return an Observable once another Observable has completed: public myObservable = () : Observable<boolean> => { console.log('Retrieving the token from the database'); return ...

Develop a TypeScript Module that consolidates all exports

My Goal with TypeScript Modules I aim to streamline my TypeScript project by creating a module that contains all the necessary class exports. Currently, I find myself using relative import statements in my classes, which can make maintenance challenging i ...

Swapping out a knockout observable that is passed as an argument

When passing two observables as parameters, I am attempting to replace them with another observable. However, for some reason, the replacement does not occur, even though changing the value on the observable works. private searchAndReplace = (flag: string ...

Next.js is displaying an error message indicating that the page cannot be properly

Building a Development Environment next.js Typescript Styled-components Steps taken to set up next.js environment yarn create next-app yarn add --dev typescript @types/react @types/node yarn add styled-components yarn add -D @types/styled-c ...

OnDrop event in React is failing to trigger

In my current React + TypeScript project, I am encountering an issue with the onDrop event not working properly. Both onDragEnter and onDragOver functions are functioning as expected. Below is a snippet of the code that I am using: import * as React from ...

Error in pagination when using MAX() function in PostgreSQL query

Here is the query I am using to retrieve the latest message from each room: SELECT MAX ( "Messages"."id" ) AS messageId, "Rooms"."id" FROM "RoomUsers" INNER JOIN "Rooms" ON " ...

Utilizing Vue.js and Webpack for Webpage Optimization with Responsive Image Loading and Sharpness Enhancement

When utilizing responsive-loader, I was anticipating an object as the return value. However, what I am getting instead is a base64 string in the format of data:image/jpeg;base64,bW9kdWxlLmV.... Unfortunately, the solutions from other posts that I have com ...

Utilizing a monorepo approach enables the inclusion of all *.d.ts files

Scenario: In our monorepo, we have 2 workspaces: foo and bar. foo contains the following files: src/file.ts src/@types/baz.d.ts The bar workspace is importing @monorepo/foo/src/file. While type-checking works for the foo workspace, it does not work fo ...

Display an error popup if a server issue occurs

I'm considering implementing an Error modal to be displayed in case of a server error upon submitting a panel. I'm contemplating whether the appropriate approach would be within the catch statement? The basic code snippet I currently have is: u ...

Refreshing Custom Functions within Excel Add-On - Web Edition

Currently, I am working on an Excel Add-In that includes custom functions utilizing the Javascript API. I have been following a particular tutorial for guidance. While attempting to debug using the Web version of Excel due to its superior logging capabili ...

Configuration options for Path Aliases in TypeScript

In my Next.js project, I am utilizing TypeScript and have organized my files as follows: |-- tsconfig.json |-- components/ |---- Footer/ |------ Footer.tsx |------ Footer.module.sass My path aliases are defined as:     "paths": {       ...

Top Method for Dynamically Adding Angular Component on Click Action

As I develop my website, I am faced with the challenge of incorporating multiple components. One specific feature involves allowing users to dynamically add a component of their choice to the "Home" page when they click a button. I have explored three diff ...

Incorporating DefinitelyTyped files into an Angular 2 project: A step-by-step guide

I am currently developing an application using angular 2 and node.js. My current task involves installing typings for the project. In the past, when starting the server and activating the TypeScript compiler, I would encounter a log with various errors rel ...

Angular displayed an unexpected error message with code TS2554, indicating that it was expecting 1 argument but received

There seems to be an error in your code. The error message reads: src/app/form-page/form-page.component.html:1:29 - error TS2554: Expected 1 argument, but got 0. <mat-form-field (ngSubmit)="onSubmit()" class="form-register"> ~~~ ...

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

I have been attempting to import a file into TypeScript that resembles a typical js file intended for use in a script tag. Despite my efforts, I have not found success with various methods. // global.d.ts declare module 'myfile.js' Within the re ...

Cypress encountered an error: Module '../../webpack.config.js' could not be located

Every time I attempt to run cypress, an error pops up once the window launches stating "Error: Cannot find module '../../webpack.config.js'" Within my plugins>index.js file, I have the following in module.exports webpackOptions: require(&apos ...