How to replace multiple placeholders in string with array values?

Question

I have a string which looks like this:

'I want a {Crust} crust {Type} pizza'

{Crust} and {Type} are placeholders in the string and I would like to replace the {Crust} and {Type} value with their actual values which are of type string array.

Crust-

['Pan','Thin','Tossed']

Type-

['Veggie','Pepperoni']

Expected Output should be all possible combinations for values from the array like below:

I want a Pan crust Veggie pizza
I want a Thin crust Veggie pizza
I want a Tossed crust Veggie pizza
I want a Pan crust Pepperoni pizza
I want a Thin crust Pepperoni pizza
I want a Tossed crust Pepperoni pizza

I'm looking for a more generic solution since I can have more values in Crust and Type array. Also, there can be a new placeholder, for example {Delivery} which would be replaced by another array of string ['For here','To go'].

Adrian Brand · Accepted Answer · 2019-09-17 20:54:13Z

1

You can do a replace on the strings

const crusts = ['Pan','Thin','Tossed'];

const types = ['Veggie','Pepperoni'];

const output = 'I want a {Crust} crust {Type} pizza'.replace('{Crust}', crusts[2]).replace('{Type}', types[1]);

console.log(output);

But this has nothing to do with Angular, usually in Angular you would have a properties on your component called crust and type and then they would be displayed in the template with binding like

I want a {{crust}} crust {{type}} pizza

See this StackBlitz https://stackblitz.com/edit/angular-prg9fx

edited Sep 17, 2019 at 20:54

answered Sep 17, 2019 at 20:47

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhishek Dhotre Over a year ago

I'm looking for a more generic solution than using hardcoded indices

mxr7350 · Accepted Answer · 2019-09-17 20:40:57Z

0

You can potentially use template literals (backticks)?

`I want ${Crust[key]} crust ${Type[key]} pizza`

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

answered Sep 17, 2019 at 20:40

mxr7350

1,4543 gold badges23 silver badges31 bronze badges

Comments

Cigogma · Accepted Answer · 2019-09-17 21:13:28Z

0

You can try using nested for loops if you have just 2 combinations for more I suggest using backtracking.

const Crusts= ['Pan','Thin','Tossed'];

const Types = ['Veggie','Pepperoni'];
for(const Crust of Crusts){
   for(const Type of Types){
    console.log(`I want ${Crust} crust ${Type} pizza`);
   }
}

answered Sep 17, 2019 at 21:13

Cigogma

776 bronze badges

1 Comment

Abhishek Dhotre Over a year ago

There can be multiple combinations, so using multiple for loops won't be a good solution.

Canica · Accepted Answer · 2019-09-18 15:53:55Z

0

This approach leverages map against each array and flattens the results producing an array of the desired strings:

Array.prototype.concat.apply([], 
    this.pizzaTypes.map(p => {
        return this.crusts.map(c => {
            return `I want a ${c} crust ${p} pizza.`;
        });
    })
);

Update:

You can nest as many arrays and flatten them appropriately if you want to have additional interpolated strings to your results.

crusts = ['Pan','Thin','Tossed'];
pizzaTypes = ['Veggie','Pepperoni'];
cheese = ['Feta','Mozzarella']

Array.prototype.concat.apply([],
        this.pizzaTypes.map(p => {
            return Array.prototype.concat.apply([],
                this.crusts.map(c => {
                    return Array.prototype.concat.apply([],
                        this.cheese.map(ch => {
                            return `I want a ${c} crust ${p} pizza with ${ch} cheese.`;
                        })
                    );
                })
            );
        })
    );

Produces this list:

I want a Pan crust Veggie pizza with Feta cheese.

I want a Pan crust Veggie pizza with Mozzarella cheese.

I want a Thin crust Veggie pizza with Feta cheese.

I want a Thin crust Veggie pizza with Mozzarella cheese.

I want a Tossed crust Veggie pizza with Feta cheese.

I want a Tossed crust Veggie pizza with Mozzarella cheese.

I want a Pan crust Pepperoni pizza with Feta cheese.

I want a Pan crust Pepperoni pizza with Mozzarella cheese.

I want a Thin crust Pepperoni pizza with Feta cheese.

I want a Thin crust Pepperoni pizza with Mozzarella cheese.

I want a Tossed crust Pepperoni pizza with Feta cheese.

I want a Tossed crust Pepperoni pizza with Mozzarella cheese.

HTH

edited Sep 18, 2019 at 15:53

answered Sep 17, 2019 at 21:20

Canica

2,7484 gold badges22 silver badges37 bronze badges

4 Comments

Abhishek Dhotre Over a year ago

Could you specify how the code would look like when there are multiple arrays instead of just two?

Canica Over a year ago

@AbhishekDhotre I've updated my answer with the response

Abhishek Dhotre Over a year ago

Thanks, but I think the code would look a bit messy if the arrays are more than 5.

Canica Over a year ago

@AbhishekDhotre Of course! You can always make a function for this which would clean and make your code reusable. I'll leave that for you to explore. Good luck!

Collectives™ on Stack Overflow

How to replace multiple placeholders in string with array values?

4 Answers 4

1 Comment

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related