CODEWITHSUNDEEP
javascriptjsonshopify
connormw
connormw

Reputation: 23

Double String Replace Issue

I am having an issue with a 'second round' of text replacement in the following function. Everything executes, no JS errors, etc. The only problem is that I cannot replace the "^" character in my 'template' string when I go to do a second 'replace' function on a string variable.

I tried a few different tests: just run the 'else' statement (pretty simple replacement) on it's own, play around with the conditional arrangement, etc., but I still cannot get my 'secondary considerations' to append to my text replacement (or even replace the carrot placeholder at all).

I am working with the Shopify JSON API if it's any help. 'options' is the result of a GET product request, and uses the 'options' JSON key and it's values. 

var createConfigsList = function(options) {

/* Container of options & product option we're working with */
var container = jQuery(".ta-OptionsContainer");

options.forEach(function(option, index, values) {
    /* Name of option we're working with/also the label & select dropdown value */
    var name = option.name;

    /* Define formats for select boxes & value replacements */

    var labelFormat = '<label>|</label>';
    var selectFormat = '<select data-option="|" class="ta-CSelectDrop">';
    var selectClose = '</select>';
    var optionFormat = '<option data-value="|">^</option>';

    if(name != "Title") {       /* 'Title' is default Shopify variant option name */
        /* Working HTML building variables */
        var bLabel, bSelect, bOption, appendFormat;

        /* Create the label & select box start */

        bLabel = labelFormat.replace("|",name);
        bSelect = selectFormat.replace("|",name);

        /* List of values within this option set */
        var values = option.values;

        values.forEach(function(optVal) {
                /* Define HTML building variable for this option tag */
                var singleOption;

                /* Create option; replace value placeholder w/ actual value */

                singleOption = optionFormat.replace("|",optVal);

                /* Secondary considerations for the text of the option tag */

                if(name == "Length") {
                        singleOption.replace("^",optVal + " Length");
                }
                else if(name == "Depth") {
                        singleOption.replace("^",optVal + " Depth");
                }
                else {
                        /* If no special considerations, just do the replacement */
                        singleOption.replace("^",optVal);
                }

                /* Combine the option into the 'list' of options */
                bOption = bOption + singleOption;
        });

        /* Close our select, and then append the new area to the display container */

        appendFormat = bLabel + bSelect + bOption + selectClose;

        container.append(appendFormat);

    }
});

Upvotes: 0

Views: 37

Answers (1)

Barmar
Barmar

Reputation: 781935

You need to assign the result of replace() back to the variable

singleOption = singleOption.replace("^", optval + " Length");

and similarly for all the other replace calls.

Upvotes: 1

Related Questions