Substitute dynamic Angular expressions with fixed values within a string

Question

Substitute dynamic Angular expressions with fixed values within a string

Inside my angular controller, I am defining a stringTemplate containing expressions like "{{data.a}} - {{data.b}}". Along with that, I have an object named data with values {a: "example1", b: "example2"}.

My goal is to find a way to replace the dynamic expressions in stringTemplate with static values from data. Essentially, the end result should be "example1 - example2".

I also need to ensure that this processed string can be stored in a database and retrieved later, even when the original data object is no longer available.

Please note that both the values within data and the content of stringTemplate will be subject to change over time.

javascript angularjs

Answer 1

Answer №1

To achieve the same result in JavaScript, you can leverage Template Literals introduced in ES6.

var data = {
    a: "example1",
    b: "example2"
};

var stringTemplate = `${data.a} - ${data.b}`;

console.log(stringTemplate);

In ES5: Using Regex

var data = {
    a: "example1",
    b: "example2"
};

var stringTemplate = "{{data.a}} - {{data.b}}";

stringTemplate = stringTemplate.replace(/\{{(.*?)}}/g, function($0, $1) {
    return data[$1.split('.')[1]] || $0;
});

console.log(stringTemplate);

Answer 2

To achieve the same result in JavaScript, you can leverage Template Literals introduced in ES6.

var data = {
    a: "example1",
    b: "example2"
};

var stringTemplate = `${data.a} - ${data.b}`;

console.log(stringTemplate);

In ES5: Using Regex

var data = {
    a: "example1",
    b: "example2"
};

var stringTemplate = "{{data.a}} - {{data.b}}";

stringTemplate = stringTemplate.replace(/\{{(.*?)}}/g, function($0, $1) {
    return data[$1.split('.')[1]] || $0;
});

console.log(stringTemplate);

Substitute dynamic Angular expressions with fixed values within a string

Answer №1

Similar questions

Using jQuery to loop through a collection

Multiple file uploads are causing the issue of req.file being undefined

When text is wrapped within the <li> tag

Understanding the extent of variables in Javascript

achieving initial value to show upon page load

Positioning an Element on a Web Page in Real-Time

Tips on incorporating variable tension feature into D3 hierarchical edge bundling

Showing a dynamically updated array in Angular

Identifying the class name of SVGAnimatedString

How to leverage tsconfig paths in Angular libraries?

There seems to be an issue with the pastebin api createPasteFromFile method as it is showing an error of 'create

Disabling the smooth scrolling feature on tab navigation

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

How can we style the <a> link once it has been downloaded?

When you add the /deep/ selector in an Angular 4 component's CSS, it applies the same style to other components. Looking for a fix?

What is the best way to determine if a checkbox has been selected in ExtJS?

Guide on how to use Vue's watch feature to monitor a particular property within an array

Vue JS causing page to flash briefly before disappearing

Incorporating Only XSD Files into an HTML Input Tag: A Simple Guide

Establish the editor's starting state