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

Encountered an issue with ReactJS app authentication using Firebase and FirebaseUI. Error message reads: "Uncaught Error: Firebase App named '[DEFAULT]-firebaseui-temp' already exists

Tips on implementing JSON data into select2 plugin

The Jquery append function is limited to the initial ajax request, necessitating a page refresh in order to populate another div with the desired

Ways to establish a minimum height for material cards using Material UI

Do you have to host a node server to run Angular applications?

React Virtualized - Blank screen issue occurring because of continuous scrolling through a large list of ITSM items

What are the ways to enable VS Code's Intellisense to collaborate with AngularJS's injected services?

Obtain an individual item from the reducer array

Nuxt - Dynamically manage routes while utilizing server-side rendering functionality

Adding child arrays to a parent array in Angular 8 using push method

Tips for implementing owl carousel in Nuxt.REACT_UNITS_CODIFY

javascript best practice for processing form data with arrays

Using Angular in conjunction with MySQL to retrieve data from the database

The passing of React parent component props to the child component is not functioning as expected

How to effectively delete the class from a navigation list item

Error: Attempting to assign a value to the property 'running' of an undefined variable

Is there a way to transfer the jQuery code I've developed on jsfiddle to my website?

Pass additional parameter while calling a function in Vue

Creating custom project structures with Sails.js 0.10 generators

Vue-resource is returning a Promise object