Suggestions for improving string.replace across various attributes

I have been working on an application with an editable script feature. As I go through the script, I find myself needing to replace placeholders with local data. While this process is functional, it feels quite messy.

initScript(script: LegalScript, lead: LeadTl): LegalScript {
    const scriptVar = new LegalScriptVariables(lead);
    for (let i = 1; i <= 30; i++) {
        script[`html${i}`] = this.replaceHtml(script[`html${i}`], scriptVar);
    }
    return script;
}

replaceHtml(html: string, scriptVar: LegalScriptVariables) {
    html = this.replaceClientFirstName(html, scriptVar.clientFirstName);
    html = this.replaceClientLastName(html, scriptVar.clientLastName);
    html = this.replaceAgentName(html, scriptVar.agentName);
    html = this.replaceProductName(html, scriptVar.productName);
    html = this.replacePolicyDeductionDate(html, scriptVar.policyDeductionDay);
    html = this.replacePolicyInceptionDate(html, scriptVar.policyInceptionDate);
    return html;
}

Does anyone have a more streamlined solution to improve this code?

angulartypescript

Answer №1

To implement modifications to the fields in an array, you can include the following script snippet inside your initScript.

const updateFields = (fieldName, variable) => script[fieldName] = this.updateField(script[fieldName], variable);
[
    'field1',
    'field2'
].forEach(f => updateFields(f, variable));

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

Is it possible to implement cross-field validation with Angular 2 using model-based addErrors?

Currently, I am working on implementing cross-field validation for two fields within a form using a reactive/model based approach. However, I am facing an issue regarding how to correctly add an error to the existing Error List of a form control. Form: ...

formsvalidationangularform-control

Issue: The Observable type does not contain a timer property

Displayed below is the code snippet: import {Component} from 'angular2/core'; import {Observable} from 'rxjs/Rx'; @Component({ selector: 'my-app', template: 'Ticks (every second) : {{ticks}}' }) export class AppCom ...

angulartimerrxjsobservable

saveToPhotoAlbum functionality not functioning as expected on both Android and iOS platforms

Everything in my ionic 4 app seems to be working fine, from taking pictures with the camera plugin to uploading them to a remote server. I can even access images from the gallery on another page. However, there's one issue that I can't seem to fi ...

angularcordovacordova-pluginsionic-nativecordova-plugin-camera

Challenge with JWT Tokens

In my application, I am utilizing a Node.JS express backend along with an Angular 4 frontend. The user ID is stored in JWT tokens, which do not expire. Here is the scenario: The user logs in. A JWT Token is generated and signed (containing the user ID). ...

node.jsangularexpressjwt

Angular studyTime must be before grantTime for validation 2 date

I need to validate 2 dates using mat-datepicker in my Angular application. Here is the code snippet for the HTML file: <mat-form-field class="w-100-p"> <input matInput [matDatepicker]="st" formControlName="stu ...

angularangular-material

What is the process for defining the type of the context for an Apollo resolver?

I am facing an issue with my Apollo GraphQL subgraph where I need to define the type for the context argument in my resolvers. When creating a resolver, I tried setting the context type like this: interface Context { dataSources: { shopify: Shopify; ...

javascriptnode.jstypescriptgraphqlapollo

Tips for upgrading from AngularJS 1.8.x to Angular CLI version 11.2.3

Looking for a straightforward way to update the angular version for my web app. Any suggestions on how to go about this? ...

angularangularjsangular-cli

Steps to integrate Framework7 with Ionic 2

Is there a way to incorporate framework7 into a ionic2 project? I have successfully installed framework7 in my ionic2 project using the following command: npm i framework7 --save My next step is to add the typescript definition to the project by downloa ...

angulartypescriptionic2html-framework-7

Angular does not support the functionality of having multiple material paginations within a single component

I am currently working on creating a component that contains two dataTables, each with a different dataSource. However, I am facing an issue where my Tables are not visible immediately after the component is loaded due to the *ngIf directive being used. Be ...

angulartypescriptangular-materialangular-material2angular-datatables

Facing a blank page with no errors displayed during the HTML rendering process in Angular version 6

One of the most frustrating aspects of working with Angular is the lack of information provided when there is a render error in an HTML page. Instead of specifying which page the error is in, Angular defaults to the route page and provides no further detai ...

htmlangular

Managing the ERR_NAME_NOT_RESOLVED issue

Currently, I am facing a task related to the health check endpoint where I need to receive a response from the backend or encounter a net::ERR_NAME_NOT_RESOLVED error if we are outside of a specific network. When attempting to send a request to my endpoin ...

javascriptangulartypescript

React Material UI Select component is failing to recognize scrolling event

Having some difficulty understanding how to detect a scroll event with a Select component using Material-UI. The Select has MenuProps={...}, and I want to listen for the scroll event inside it. I've tried putting onScroll within MenuProps={...}, but ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Join our mailing list for exclusive updates on Angular 6

ingredients : Array additionalIngredients : Array In my code, I have two different methods for subscribing: this.ingredients.valueChanges.subscribe(val=> { console.log(val); } this.additionalIngredients.valueChanges.subscribe(val2=> { console.lo ...

arraysangulartypescriptsubscribe

Objects That Are Interconnected in Typescript

I have been delving into TS and Angular. I initially attempted to update my parent component array with an EventEmitter call. However, I later realized that this was unnecessary because my parent array is linked to my component variables (or so I believe, ...

javascriptangulartypescript

Utilize a generic data type for a property that can accept values of type 'number', 'string', or 'undefined'

This query involves React code but pertains to typescript rather than react. To simplify, I have a component called MyList which accepts a single generic type argument passed to the props type. The generic type represents an object that will be used to c ...

javascriptreactjstypescript

Tips for securely accessing a parameterized property of an object in Typescript

I need to create a function that takes an object as an argument and accesses a specific property of this object based on another parameter. Here is the code snippet: // javascript code function setProperty(subject, property, value) { subject[property] ...

typescripttype-annotation

Struggling to retrieve service information for implementation in the component

I am currently working on a project where: 1. I have created a news.service.ts service file with the following code: 2. Within the service, I have implemented a function named throwData() that returns the service data. Here is the code snippet: im ...

angularangular5angular6angular-services

Obtain the initial URL when initializing an Angular application

In the process of creating an Angular application for a landing page of a SaaS platform, the SaaS redirects to the Angular app using the URL http://localhost:4200/token=<token>. Shortly after, Angular switches to the home component at http://localhos ...

angularurl

utilize makeStyles to modify button text color

Initially, my button was styled like this: style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 30px', }}> It worke ...

javascriptcssreactjstypescriptmaterial-ui

Utilizing React Typescript to Dynamically Restrict Props Configuration Based on Data

I am new to TypeScript and I have a question regarding passing dynamic data to a React component while restricting props setting. I came across a simple component with the constraint of "RandomNumberProps", where the component can only accept either "isPo ...

reactjstypescript