Arcade script to return color-coded value from attribute field

Question

I am working in ArcGIS Pro pop-ups Expressions and I have parsed together an Arcade script to search an attribute field in ArcGIS Pro for some words, and then return the words color-coded into the pop-up text. In the attribute table I have it setup so users can select an attribute from a drop down menu.

Here is my code:

// Define the attribute field and feature layer
var fieldName = 'disposition';
var layerName = 'HC_footprints';

// Get the value of the attribute field
var disposition = $feature[fieldName];

// Define colors for each disposition
var color;
switch (disposition) {
    case 'Bad':
        color = '#FF0000'; // Red
        break;
    case 'Fair':
        color = '#A52A2A'; // Brown
        break;
    case 'Good':
        color = '#90EE90'; // Light green
        break;
    case 'Inaccessible':
    case 'Unknown':
        color = '#808080'; // Dark grey
        break;
    default:
        color = '#000000'; // Black for other cases
}

// Return the disposition with the appropriate color
return "<CLR>" + color + "</CLR>" + disposition;

When I run it it fails and says:

Test execution error: Unexpected token '{'.. Verify test data.

What is wrong with my code? I believe a better way to do it is to use an if/Tehn statement like below. I get close, just need to color code the words Bad as red, Good as green, Fair as brown, and Unknown or Inaccessible as black:

   var disposition = $feature.disposition;

    if (disposition == 'Good') {
    return 'Good'
    }
    else if (disposition == 'Bad') {
    return 'Bad'
    }
    else if (disposition == 'Fair') {
    return 'Fair'
    }
    else if (disposition == 'Unknown') {
    return 'Unknown'
    }
    else if (disposition == 'Inaccessible') {
    return 'Inaccessible'
    }

    else {
    return 'no data'
    }  

Answer 1

Although ArcGIS Arcade appears to be modeled after JavaScript, it is not JavaScript, so it isn't uncommon for people who are familiar with JavaScript to jump into writing Arcade without looking through Arcade | Documentation | ArcGIS Developers first.

In this particular case, the issue is that switch doesn't exist in Function Reference | ArcGIS Arcade | ArcGIS Developers. Looking over the available functions, Decode is the most appropriate function to use.

// Get the value of the attribute field
var disposition = $feature.disposition;

// Define colors for each disposition
var color = Decode(disposition,
    'Bad', '#FF0000',             // Red
    'Fair', '#A52A2A',            // Brown
    'Good', '#90EE90',            // Light green
    'Inaccessible', '', 
    'Unknown', '#808080',         // Dark grey
    '#000000'                     // Black for other cases
)

// Return the disposition with the appropriate color
return { 
    type : 'text', 
    text : Concatenate([
        '<p style="color:' + color + '">',
        disposition,
        '</p>'
    ])
};

UPDATE: Arcade code updated to use in-line CSS since text formatting tags, e.g., <CLR></CLR>, are an Esri construct for labeling and not supported in Pop-ups.