JSFiddle - React, Tailwind, and code Playground

by amullins

HTML

<div class="results"></div>

CSS

.results {
    width:200px;
    background-color:blue;
    color:white;
    position:relative;
    margin:0 auto;
    border-radius:10px;
    padding:10px;
    font-family:helvetica arial;
    font-size:24px;
}

JavaScript

$(function() {
 var myOriginalJSON = {
    "reasons": {
        "options": [
            {
                "value": "",
                "label": "Seleziona una voce",
                "selected": true,
                "requiresValidation": false
            },
            {
                "value": "small",
                "label": "Too little",
                "selected": false,
                "requiresValidation": false
            },
            {
                "value": "big",
                "label": "Too big",
                "selected": false,
                "requiresValidation": false
            },
            {
                "value": "unsuitable",
                "label": "I don't like it",
                "selected": false,
                "requiresValidation": true
            },
            {
                "value": "other",
                "label": "Other",
                "selected": false,
                "requiresValidation": true
            }
        ]
    }
}

function myOptions(originalJSON) {
    this.original_json = originalJSON;
    this.length = originalJSON.reasons.options.length;
    var original_options = originalJSON.reasons.options;
    for(var i = 0; i < this.length; i++)
       this[original_options[i].value] = original_options[i];
}
   
    $(".results").text(new myOptions(myOriginalJSON)["unsuitable"].requiresValidation);
});