Javascript API popup functions return value is unclear

[MKF62]

I'm creating a custom pop-up where I send the attribute table value into a function to reformat it. It's called like so:

var herbicide = '${Herbicide1:herbName}'‍‍

It then enters the function like this (it has many more cases than what's shown):

herbName = function(value){
   herb = '';
   switch(value){
       case null:
           herb = 'None';
           break;
       case 1:
           herb = '2,4-D';
           break;
       ....
   };
   return herb;
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The 'return herb' line should return the new value and I thought that the 'herbicide' variable would be set equal to whatever was returned, but that does not appear to be the case if I actually try to print it's value. When I print it:

>>> console.log(herbicide);

>>> ${Herbicide1:herbName}

This is making it really hard to do conditional statements on the variable. For instance, if herbicide is set to 'None' then I don't want it to show up in the popup, but using this statement:

if (herbicide == 'None')‍{
    //do something
}‍‍‍‍‍‍‍‍‍‍‍‍

It will never evaluate true because unfortunately, no matter what value was returned from the function, the value being tested against is always the string '${Herbicide1:herbName}'

What's weird to me is that you can't see the value by printing it to the console, yet I know my functions are returning the correct values because it prints them correctly to a popup. I can't test the value I need to test... what can I do to fix that?

[_____]

//

[MKF62]

Nah, that won't work. I am using API 3.25, I think the syntax might be a little different in 4.x.

If I try what you suggested with the two console.log statements, it first prints 'null' and then it prints 'None' as I would expect. As I stated earlier, the functions are fine and work correctly, I just can't access the returned value through the variable they are returned to, for whatever reason. They print as I would expect in the popups, except for the fact that it ignores all the conditionals because the statements will never evaluate to true given the string being stored in the variable never updates/changes...

The code generating this popup is pretty complicated given that the HTML is altered depending on what data was entered and what was left null by the user....but if you want to wade through it, be my guest, lol. 

//Format the popup content for the habitat management tract feature layer
            var veg1 = '${VegMgmtPractice1:vegPName}';
            var pcntTreat1 = '${PercentTreated1:pcntName}';
            var month1 = '${Month1:monthName}';
            var content = '<table id="mgmtPopupTable1"><tr><th>Veg Mgmt Practice</th><th>% Field Treated</th><th>Month Treated</th></tr> \
                            <tr><td>' + veg1 + '</td><td>' + pcntTreat1 + '</td><td>' + month1 + '</td></tr>';
            var veg2 = '${VegMgmtPractice2:vegPName}';
            if (veg2 != 'Did nothing') {
                var pcntTreat2 = '${PercentTreated2:pcntName}';
                var month2 = '${Month2:monthName}';
                content = content + '<tr><td>' + veg2 + '</td><td>' + pcntTreat2 + '</td><td>' + month2 + '</td></tr>';
                var veg3 = '${VegMgmtPractice3:vegPName}';
                if (veg3 != 'Did nothing') {
                    var pcntTreat3 = '${PercentTreated3:pcntName}';
                    var month3 = '${Month3:monthName}';
                    content = content + '<tr><td>' + veg3 + '</td><td>' + pcntTreat3 + '</td><td>' + month3 + '</td></tr></table>';
                }
                else {
                    content = content + '</table>';
                }
            }
            else {
                content = content + '</table>';
            };

            var fbPractice = '${FarmBillPractice:fbPName}';
            content = content + '<br><p class="mgmtPopupPgph"><b>Farm Bill Practice:</b> ' + fbPractice + '</p>';
            if (fbPractice != 'None') {
                var mcm1 = '${MCMPractice1:mcmName}';
                if (mcm1 != 'None') {
                    var month4 = '${Month4:monthName}';
                    content = content + '<table id="mgmtPopupTable2"><tr><th>Mid-Contract Mgmt</th><th>Month Applied</th></tr> \
                                         <tr><td>' + mcm1 + '</td><td>' + month4 + '</td></tr>';
                    var mcm2 = '${MCMPractice2:mcmName}';
                    if (mcm2 != 'None') {
                        var month5 = '${Month5:monthName}';
                        content = content + '<tr><td>' + mcm2 + '</td><td>' + month5 + '</td></tr></table>';
                    }
                    else {
                        content = content + '</table>';
                    }
                }
                else {
                    content = content + '</table>';
                }
            };

            var herb1 = '${Herbicide1:herbName}';
            if (herb1 != 'None') {
                content = content + '<br><p class="mgmtPopupPgph"><b>Herbicides:</b> ' + herb1;
                var herb2 = '${Herbicide2:herbName}';
                if (herb2 != 'None') {
                    content = content + ', ' + herb2 + '</p>';
                }
                else {
                    content = content + '</p>'
                }
            };

            var impBy = '${ImplementedBy:impName}';
            var fundBy = '${FundedBy:fundName}';
            content = content + '<p class="mgmtPopupPgph"><b>Implemented by:</b> ' + impBy + '<br><b>Funded by:</b> ' + fundBy + '</p>';

            var mgmtTractPopupBox = new InfoTemplate("${StateID} Habitat Management Tract", content);
            var mgmtLinePopupBox = new InfoTemplate("${StateID} Habitat Management Line", content);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[MKF62 · Accepted solution]

So it turns out using conditionals isn't possible when formatting popup content as per the documentation:

Placeholders (string substitution)

When graphics or feature layers have an info template, that info template is automatically used by the API to construct info window content when a feature is selected. Within an info template, placeholders denoted by ${} are used to specify attributes to display. At run-time, substitution occurs and the placeholder is replaced with the actual attribute value for the selected feature. In the code below, values inside ${} correspond to attribute field names. In the screen shot, values for the selected feature were substituted for the associated placeholders.

Since it doesn't actually convert the values until run time, that's why it always appears as the placeholder when you console.log() it and never appears to change despite the function returning an actual value. To work around this, it appears I have to write a custom function and set the InfoTemplate content to what gets returned by the function. This means you don't use attribute fields specifiers and instead work with a graphic to get the attributes. 

Format info window content | Guide | ArcGIS API for JavaScript 3.25