Question

I’m using the code below to insert content into a page. I need to insert some variables in the text to generate some dynamic values and am unsure how to do this. Can someone tell me what I’d need to change?

Here’s a slimmed down example of how I’m storing the data in my JS:

var fruit = {
    'apples': {
        'goldenDelicious' : {
            color: 'yellow',
            sale: 'A sale of $XXXXX (need to insert a number in here). Be sure to buy some before they are all gone!',
            link: {
                linkText: ('This company sells this for $XXXXX (eed to insert a price here). Click here to visit their site.'),
                url: 'I NEED TO INSERT THE URL HERE'
            }
        }
    }
}

Here’s an example of how I’m calling it: (it’s more dynamic than this, but you get the idea)

var fruitType = 'apples';
var fruitVariety = 'goldenDelicious';

fruit[fruitType][fruitVariety], function () {
    // do something
});

So what I’d like is to be able to insert values like a price, sale, and URL into the object.

Answer 1

There are a bunch of ways to do this. If you’re going to be doing a lot of this type of replacement, you’ll probably want to look at a templating engine. I’ve been using Trimpath, and am happy with it.

If you don’t want to get that fancy yet, put your own placeholder tokens in the string and then replace them.

var fruit = {
    'apples': {
        'goldenDelicious' : {
            color: 'yellow',
            sale: 'A sale of PLACEHOLDER_1. Be sure to buy some before they are all gone!',
            link: {
                linkText: ('This company sells this for PLACEHOLDER_2. Click here to visit their site.'),
                url: 'I NEED TO INSERT THE URL HERE'
            }
        }
    }
}

fruit.apples.goldenDelicious.sale = fruit.apples.goldenDelicious.sale.replace("PLACEHOLDER_1", "the real value");