Search in array in JS or jQuery

Question

I am beginner webdeveloper. I need function to convert RAL color to hex color.

I have this code:

const rals = {
        "RAL1000": "#BEBD7F",
        "RAL1001": "#C2B078",
        "RAL1002": "#C6A664",
        "RAL1003": "#E5BE01",
        "RAL1004": "#CDA434",
        "RAL1005": "#A98307",
        "RAL1006": "#E4A010",
        "RAL1007": "#DC9D00",
        "RAL1011": "#8A6642",
        "RAL1012": "#C7B446",
        "RAL1013": "#EAE6CA",
        "RAL1014": "#E1CC4F",
        "RAL1015": "#E6D690",
        "RAL1016": "#EDFF21",
        "RAL1017": "#F5D033",
        "RAL1018": "#F8F32B",
        "RAL1019": "#9E9764",
        "RAL1020": "#999950",
        "RAL1021": "#F3DA0B",
        "RAL1023": "#FAD201",
        "RAL1024": "#AEA04B",
        "RAL1026": "#FFFF00",
        "RAL1027": "#9D9101",
        "RAL1028": "#F4A900",
        "RAL1032": "#D6AE01",
        "RAL1033": "#F3A505",
        "RAL1034": "#EFA94A",
        "RAL1035": "#6A5D4D",
        "RAL1036": "#705335",
        "RAL1037": "#F39F18",
        "RAL2000": "#ED760E",
        "RAL2001": "#C93C20",
        "RAL2002": "#CB2821",
        "RAL2003": "#FF7514",
        "RAL2004": "#F44611",
        "RAL2005": "#FF2301",
        "RAL2007": "#FFA420",
        "RAL2008": "#F75E25",
        "RAL2009": "#F54021",
        "RAL2010": "#D84B20",
        "RAL2011": "#EC7C26",
        "RAL2012": "#E55137",
        "RAL2013": "#C35831",
        "RAL3000": "#AF2B1E",
        "RAL3001": "#A52019",
        "RAL3002": "#A2231D",
        "RAL3003": "#9B111E",
        "RAL3004": "#75151E",
        "RAL3005": "#5E2129",
        "RAL3007": "#412227",
        "RAL3009": "#642424",
        "RAL3011": "#781F19",
        "RAL3012": "#C1876B",
        "RAL3013": "#A12312",
        "RAL3014": "#D36E70",
        "RAL3015": "#EA899A",
        "RAL3016": "#B32821",
        "RAL3017": "#E63244",
        "RAL3018": "#D53032",
        "RAL3020": "#CC0605",
        "RAL3022": "#D95030",
        "RAL3024": "#F80000",
        "RAL3026": "#FE0000",
        "RAL3027": "#C51D34",
        "RAL3028": "#CB3234",
        "RAL3031": "#B32428",
        "RAL3032": "#721422",
        "RAL3033": "#B44C43",
        "RAL4001": "#6D3F5B",
        "RAL4002": "#922B3E",
        "RAL4003": "#DE4C8A",
        "RAL4004": "#641C34",
        "RAL4005": "#6C4675",
        "RAL4006": "#A03472",
        "RAL4007": "#4A192C",
        "RAL4008": "#924E7D",
        "RAL4009": "#A18594",
        "RAL4010": "#CF3476",
        "RAL4011": "#8673A1",
        "RAL4012": "#6C6874",
        "RAL5000": "#354D73",
        "RAL5001": "#1F3438",
        "RAL5002": "#20214F",
        "RAL5003": "#1D1E33",
        "RAL5004": "#18171C",
        "RAL5005": "#1E2460",
        "RAL5007": "#3E5F8A",
        "RAL5008": "#26252D",
        "RAL5009": "#025669",
        "RAL5010": "#0E294B",
        "RAL5011": "#231A24",
        "RAL5012": "#3B83BD",
        "RAL5013": "#1E213D",
        "RAL5014": "#606E8C",
        "RAL5015": "#2271B3",
        "RAL5017": "#063971",
        "RAL5018": "#3F888F",
        "RAL5019": "#1B5583",
        "RAL5020": "#1D334A",
        "RAL5021": "#256D7B",
        "RAL5022": "#252850",
        "RAL5023": "#49678D",
        "RAL5024": "#5D9B9B",
        "RAL5025": "#2A6478",
        "RAL5026": "#102C54",
        "RAL6000": "#316650",
        "RAL6001": "#287233",
        "RAL6002": "#2D572C",
        "RAL6003": "#424632",
        "RAL6004": "#1F3A3D",
        "RAL6005": "#2F4538",
        "RAL6006": "#3E3B32",
        "RAL6007": "#343B29",
        "RAL6008": "#39352A",
        "RAL6009": "#31372B",
        "RAL6010": "#35682D",
        "RAL6011": "#587246",
        "RAL6012": "#343E40",
        "RAL6013": "#6C7156",
        "RAL6014": "#47402E",
        "RAL6015": "#3B3C36",
        "RAL6016": "#1E5945",
        "RAL6017": "#4C9141",
        "RAL6018": "#57A639",
        "RAL6019": "#BDECB6",
        "RAL6020": "#2E3A23",
        "RAL6021": "#89AC76",
        "RAL6022": "#25221B",
        "RAL6024": "#308446",
        "RAL6025": "#3D642D",
        "RAL6026": "#015D52",
        "RAL6027": "#84C3BE",
        "RAL6028": "#2C5545",
        "RAL6029": "#20603D",
        "RAL6032": "#317F43",
        "RAL6033": "#497E76",
        "RAL6034": "#7FB5B5",
        "RAL6035": "#1C542D",
        "RAL6036": "#193737",
        "RAL6037": "#008F39",
        "RAL6038": "#00BB2D",
        "RAL7000": "#78858B",
        "RAL7001": "#8A9597",
        "RAL7002": "#7E7B52",
        "RAL7003": "#6C7059",
        "RAL7004": "#969992",
        "RAL7005": "#646B63",
        "RAL7006": "#6D6552",
        "RAL7008": "#6A5F31",
        "RAL7009": "#4D5645",
        "RAL7010": "#4C514A",
        "RAL7011": "#434B4D",
        "RAL7012": "#4E5754",
        "RAL7013": "#464531",
        "RAL7015": "#434750",
        "RAL7016": "#293133",
        "RAL7021": "#23282B",
        "RAL7022": "#332F2C",
        "RAL7023": "#686C5E",
        "RAL7024": "#474A51",
        "RAL7026": "#2F353B",
        "RAL7030": "#8B8C7A",
        "RAL7031": "#474B4E",
        "RAL7032": "#B8B799",
        "RAL7033": "#7D8471",
        "RAL7034": "#8F8B66",
        "RAL7035": "#C5C7C4",
        "RAL7036": "#7F7679",
        "RAL7037": "#7D7F7D",
        "RAL7038": "#B5B8B1",
        "RAL7039": "#6C6960",
        "RAL7040": "#9DA1AA",
        "RAL7042": "#8D948D",
        "RAL7043": "#4E5452",
        "RAL7044": "#CAC4B0",
        "RAL7045": "#909090",
        "RAL7046": "#82898F",
        "RAL7047": "#D0D0D0",
        "RAL7048": "#898176",
        "RAL8000": "#826C34",
        "RAL8001": "#955F20",
        "RAL8002": "#6C3B2A",
        "RAL8003": "#734222",
        "RAL8004": "#8E402A",
        "RAL8007": "#59351F",
        "RAL8008": "#6F4F28",
        "RAL8011": "#5B3A29",
        "RAL8012": "#592321",
        "RAL8014": "#382C1E",
        "RAL8015": "#633A34",
        "RAL8016": "#4C2F27",
        "RAL8017": "#45322E",
        "RAL8019": "#403A3A",
        "RAL8022": "#212121",
        "RAL8023": "#A65E2E",
        "RAL8024": "#79553D",
        "RAL8025": "#755C48",
        "RAL8028": "#4E3B31",
        "RAL8029": "#763C28",
        "RAL9001": "#FDF4E3",
        "RAL9002": "#E7EBDA",
        "RAL9003": "#F4F4F4",
        "RAL9004": "#282828",
        "RAL9005": "#0A0A0A",
        "RAL9006": "#A5A5A5",
        "RAL9007": "#8F8F8F",
        "RAL9010": "#FFFFFF",
        "RAL9011": "#1C1C1C",
        "RAL9016": "#F6F6F6",
        "RAL9017": "#1E1E1E",
        "RAL9018": "#D7D7D7",
        "RAL9022": "#9C9C9C",
        "RAL9023": "#828282"
    };



function showRalColors()
    {
        $(".ral").each(function(){
            var color = $(this).data("id")l // here I get my Ralfs code - ex RAL9018
           $(this).css('background-color', convertToHex(color)); // here is my problem. In color I have RAL. I need search it in my rap array and get HEX
        });
    }

I would like my function to convert colors from RAL to HEX. in the rals table I have both the RAL color and the HEX equivalent.

I prepared the showRalColors functions to convert RAL to HEX, but I cannot find a RAL equivalent in HEX in the table.

Please help me

Answer 1

You can do this without writing any function:

$(this).css('background-color', rals[color]);

But if you want a function:

function showRalColors()
    {
        $(".ral").each(function(){
            var color = $(this).data("id");
           $(this).css('background-color', convertToHex(color)); 
        });
    }

function convertToHex(color){
        return rals[color];
    }

Answer 2

You can get the value from the object via its "key" using:

var ral = rals[color];

Applying this to your script (with some samples):

const rals = {
  "RAL1000": "#BEBD7F",
  // ...
  "RAL2001": "#C93C20",
  // ...
  "RAL3002": "#A2231D",
  // ...
  "RAL9004": "#282828",
  // ...
};

function showRalColors() {
  $(".ral").each(function() {
    var color = $(this).data("id"); // here I get my Ralfs code - ex RAL9018
    $(this).css('background-color', convertToHex(color)); // here is my problem. In color I have RAL. I need search it in my rap array and get HEX
  });
}

function convertToHex(color) {
  return rals[color];
}

showRalColors();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ral" data-id="RAL1000">RAL1000</div>
<div class="ral" data-id="RAL2001">RAL2001</div>
<div class="ral" data-id="RAL3002">RAL3002</div>
<div class="ral" data-id="RAL9004">RAL9004</div>

Answer 3

Basically your rals constant is an object. The "ral" values are the property names (keys) and the hex values are the property values. This means you can access any hex value using one of the following:

rals.ral

or

rals[ral]

where ral is an existing "ral" value.