how to find a value in array of objects with key value pairs

Question

I have an array of objects with key value pairs, I'd like to find the value base on the key I have.

Here is the array:

const baseColors = [{"WHITE":"rgb(255,255,255)"},{"BLACK":"rgb(0,0,0)"},{"DARK GRAY":"rgb(60,60,60)"},{"MEDIUM GRAY":"rgb(98,98,98)"},{"LIGHT GRAY":"rgb(185,185,185)"},{"POLARIS SQUEEZE":"rgb(242,255,0)"},{"SUNBURST":"rgb(254,227,49)"},{"PRO YELLOW":"rgb(253,214,20)"},{"YELLOW":"rgb(243,194,0)"},{"DEEP YELLOW":"rgb(241,169,0)"},{"ORANGE CRUSH":"rgb(254,134,29)"},{"TANGERINE":"rgb(255,102,0)"},{"ORANGE":"rgb(232,85,0)"},{"RACE ORANGE":"rgb(232,58,0)"},{"TERRA COTTA":"rgb(160,61,1)"},{"RUBY RED":"rgb(137,0,0)"},{"TOMATO RED":"rgb(176,29,5)"},{"LAVA RED":"rgb(182,32,7)"},{"POLARIS RED":"rgb(199,6,7)"},{"INTENSE RED":"rgb(223,37,37)"},{"BURGUNDY":"rgb(93,0,33)"},{"RASPBERRY":"rgb(118,5,66)"},{"HOT PINK":"rgb(170,19,118)"},{"PINK":"rgb(222,103,156)"},{"LIGHT PURPLE":"rgb(136,90,168)"},{"VIOLET":"rgb(72,0,144)"},{"PURPLE":"rgb(48,0,92)"},{"RETRO BLUE":"rgb(14,10,49)"},{"LIGHT NAVY":"rgb(10,23,51)"},{"YAMAHA BLUE":"rgb(0,8,102)"},{"SUMMIT BLUE":"rgb(6,28,89)"},{"VOODOO BLUE":"rgb(11,69,127)"},{"BLUE":"rgb(2,25,200)"},{"OCTANE BLUE":"rgb(1,157,232)"},{"ICE BLUE":"rgb(51,162,184)"},{"AQUA":"rgb(54,188,161)"},{"TEAL":"rgb(0,115,115)"},{"MANTA GREEN":"rgb(173,198,4)"},{"LIME GREEN":"rgb(146,199,1)"},{"KAWASAKI GREEN":"rgb(1,189,1)"},{"APPLE GREEN":"rgb(67,136,0)"},{"CAT GREEN":"rgb(0,117,17)"},{"GREEN":"rgb(1,102,28)"},{"FOREST GREEN":"rgb(0,53,26)"},{"ARMY GREEN":"rgb(48,62,9)"},{"BROWN":"rgb(52,27,23)"},{"TAN":"rgb(136,96,50)"},{"BEIGE":"rgb(218,190,152)"},{"SILVER METALLIC":"rgb(175,178,178)"},{"GOLD METALLIC":"rgb(148,110,44)"},{"COPPER METALLIC":"rgb(130,64,0)"}];

So I'd like to find the value for example like

const baseColor1 = $("[name='color1']").val();
const modelColor1Value = baseLayerColors.find(`${baseColor1}`);

But this gives

TypeError: Original Color is not a function error.

How can I do this? The structure of the array of objects I think is throwing me off with what the correct syntax should be for an array.find(). Thanks.

Answer 1

Try

baseColors.find(c=> Object.keys(c)[0]==colorName);

 const baseColors = [{"WHITE":"rgb(255,255,255)"},{"BLACK":"rgb(0,0,0)"},{"DARK GRAY":"rgb(60,60,60)"},{"MEDIUM GRAY":"rgb(98,98,98)"},{"LIGHT GRAY":"rgb(185,185,185)"},{"POLARIS SQUEEZE":"rgb(242,255,0)"},{"SUNBURST":"rgb(254,227,49)"},{"PRO YELLOW":"rgb(253,214,20)"},{"YELLOW":"rgb(243,194,0)"},{"DEEP YELLOW":"rgb(241,169,0)"},{"ORANGE CRUSH":"rgb(254,134,29)"},{"TANGERINE":"rgb(255,102,0)"},{"ORANGE":"rgb(232,85,0)"},{"RACE ORANGE":"rgb(232,58,0)"},{"TERRA COTTA":"rgb(160,61,1)"},{"RUBY RED":"rgb(137,0,0)"},{"TOMATO RED":"rgb(176,29,5)"},{"LAVA RED":"rgb(182,32,7)"},{"POLARIS RED":"rgb(199,6,7)"},{"INTENSE RED":"rgb(223,37,37)"},{"BURGUNDY":"rgb(93,0,33)"},{"RASPBERRY":"rgb(118,5,66)"},{"HOT PINK":"rgb(170,19,118)"},{"PINK":"rgb(222,103,156)"},{"LIGHT PURPLE":"rgb(136,90,168)"},{"VIOLET":"rgb(72,0,144)"},{"PURPLE":"rgb(48,0,92)"},{"RETRO BLUE":"rgb(14,10,49)"},{"LIGHT NAVY":"rgb(10,23,51)"},{"YAMAHA BLUE":"rgb(0,8,102)"},{"SUMMIT BLUE":"rgb(6,28,89)"},{"VOODOO BLUE":"rgb(11,69,127)"},{"BLUE":"rgb(2,25,200)"},{"OCTANE BLUE":"rgb(1,157,232)"},{"ICE BLUE":"rgb(51,162,184)"},{"AQUA":"rgb(54,188,161)"},{"TEAL":"rgb(0,115,115)"},{"MANTA GREEN":"rgb(173,198,4)"},{"LIME GREEN":"rgb(146,199,1)"},{"KAWASAKI GREEN":"rgb(1,189,1)"},{"APPLE GREEN":"rgb(67,136,0)"},{"CAT GREEN":"rgb(0,117,17)"},{"GREEN":"rgb(1,102,28)"},{"FOREST GREEN":"rgb(0,53,26)"},{"ARMY GREEN":"rgb(48,62,9)"},{"BROWN":"rgb(52,27,23)"},{"TAN":"rgb(136,96,50)"},{"BEIGE":"rgb(218,190,152)"},{"SILVER METALLIC":"rgb(175,178,178)"},{"GOLD METALLIC":"rgb(148,110,44)"},{"COPPER METALLIC":"rgb(130,64,0)"}]; colorName = 'BROWN'; color = baseColors.find(c=> Object.keys(c)[0]==colorName); console.log(color[colorName]); 

Answer 2

Another way to do it without Object.keys() can be like below: This is slight variation from Kamil's solution.

baseColors.find(c=> c[colorName]);

 const baseColors = [{"WHITE":"rgb(255,255,255)"},{"BLACK":"rgb(0,0,0)"},{"DARK GRAY":"rgb(60,60,60)"},{"MEDIUM GRAY":"rgb(98,98,98)"},{"LIGHT GRAY":"rgb(185,185,185)"},{"POLARIS SQUEEZE":"rgb(242,255,0)"},{"SUNBURST":"rgb(254,227,49)"},{"PRO YELLOW":"rgb(253,214,20)"},{"YELLOW":"rgb(243,194,0)"},{"DEEP YELLOW":"rgb(241,169,0)"},{"ORANGE CRUSH":"rgb(254,134,29)"},{"TANGERINE":"rgb(255,102,0)"},{"ORANGE":"rgb(232,85,0)"},{"RACE ORANGE":"rgb(232,58,0)"},{"TERRA COTTA":"rgb(160,61,1)"},{"RUBY RED":"rgb(137,0,0)"},{"TOMATO RED":"rgb(176,29,5)"},{"LAVA RED":"rgb(182,32,7)"},{"POLARIS RED":"rgb(199,6,7)"},{"INTENSE RED":"rgb(223,37,37)"},{"BURGUNDY":"rgb(93,0,33)"},{"RASPBERRY":"rgb(118,5,66)"},{"HOT PINK":"rgb(170,19,118)"},{"PINK":"rgb(222,103,156)"},{"LIGHT PURPLE":"rgb(136,90,168)"},{"VIOLET":"rgb(72,0,144)"},{"PURPLE":"rgb(48,0,92)"},{"RETRO BLUE":"rgb(14,10,49)"},{"LIGHT NAVY":"rgb(10,23,51)"},{"YAMAHA BLUE":"rgb(0,8,102)"},{"SUMMIT BLUE":"rgb(6,28,89)"},{"VOODOO BLUE":"rgb(11,69,127)"},{"BLUE":"rgb(2,25,200)"},{"OCTANE BLUE":"rgb(1,157,232)"},{"ICE BLUE":"rgb(51,162,184)"},{"AQUA":"rgb(54,188,161)"},{"TEAL":"rgb(0,115,115)"},{"MANTA GREEN":"rgb(173,198,4)"},{"LIME GREEN":"rgb(146,199,1)"},{"KAWASAKI GREEN":"rgb(1,189,1)"},{"APPLE GREEN":"rgb(67,136,0)"},{"CAT GREEN":"rgb(0,117,17)"},{"GREEN":"rgb(1,102,28)"},{"FOREST GREEN":"rgb(0,53,26)"},{"ARMY GREEN":"rgb(48,62,9)"},{"BROWN":"rgb(52,27,23)"},{"TAN":"rgb(136,96,50)"},{"BEIGE":"rgb(218,190,152)"},{"SILVER METALLIC":"rgb(175,178,178)"},{"GOLD METALLIC":"rgb(148,110,44)"},{"COPPER METALLIC":"rgb(130,64,0)"}]; colorName = 'APPLE GREEN'; color = baseColors.find(c=> c[colorName]); console.log(color[colorName]) 

Answer 3

const baseColor1 = $("[name='color1']").val();
const modelColor1Object = baseLayerColors.find(colorObj => colorObj[baseColor1]);
const modelColor1Value = modelColor1Object[baseColor1];

Answer 4

The variable baseColors is an array of objects, therefore you need to use JavaScript's Bracket Notation to find the correct key.

Please use the following snippet to see how that works.

 const baseColors = [{"WHITE":"rgb(255,255,255)"},{"BLACK":"rgb(0,0,0)"},{"DARK GRAY":"rgb(60,60,60)"},{"MEDIUM GRAY":"rgb(98,98,98)"},{"LIGHT GRAY":"rgb(185,185,185)"},{"POLARIS SQUEEZE":"rgb(242,255,0)"},{"SUNBURST":"rgb(254,227,49)"},{"PRO YELLOW":"rgb(253,214,20)"},{"YELLOW":"rgb(243,194,0)"},{"DEEP YELLOW":"rgb(241,169,0)"},{"ORANGE CRUSH":"rgb(254,134,29)"},{"TANGERINE":"rgb(255,102,0)"},{"ORANGE":"rgb(232,85,0)"},{"RACE ORANGE":"rgb(232,58,0)"},{"TERRA COTTA":"rgb(160,61,1)"},{"RUBY RED":"rgb(137,0,0)"},{"TOMATO RED":"rgb(176,29,5)"},{"LAVA RED":"rgb(182,32,7)"},{"POLARIS RED":"rgb(199,6,7)"},{"INTENSE RED":"rgb(223,37,37)"},{"BURGUNDY":"rgb(93,0,33)"},{"RASPBERRY":"rgb(118,5,66)"},{"HOT PINK":"rgb(170,19,118)"},{"PINK":"rgb(222,103,156)"},{"LIGHT PURPLE":"rgb(136,90,168)"},{"VIOLET":"rgb(72,0,144)"},{"PURPLE":"rgb(48,0,92)"},{"RETRO BLUE":"rgb(14,10,49)"},{"LIGHT NAVY":"rgb(10,23,51)"},{"YAMAHA BLUE":"rgb(0,8,102)"},{"SUMMIT BLUE":"rgb(6,28,89)"},{"VOODOO BLUE":"rgb(11,69,127)"},{"BLUE":"rgb(2,25,200)"},{"OCTANE BLUE":"rgb(1,157,232)"},{"ICE BLUE":"rgb(51,162,184)"},{"AQUA":"rgb(54,188,161)"},{"TEAL":"rgb(0,115,115)"},{"MANTA GREEN":"rgb(173,198,4)"},{"LIME GREEN":"rgb(146,199,1)"},{"KAWASAKI GREEN":"rgb(1,189,1)"},{"APPLE GREEN":"rgb(67,136,0)"},{"CAT GREEN":"rgb(0,117,17)"},{"GREEN":"rgb(1,102,28)"},{"FOREST GREEN":"rgb(0,53,26)"},{"ARMY GREEN":"rgb(48,62,9)"},{"BROWN":"rgb(52,27,23)"},{"TAN":"rgb(136,96,50)"},{"BEIGE":"rgb(218,190,152)"},{"SILVER METALLIC":"rgb(175,178,178)"},{"GOLD METALLIC":"rgb(148,110,44)"},{"COPPER METALLIC":"rgb(130,64,0)"}]; function find() { const baseColor1 = $("[name='color1']").val(); const modelColor1Value = baseColors.find(color => color[baseColor1])[baseColor1]; $("#result").text(modelColor1Value); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input name="color1" type="text" value="BROWN" /> <input type="button" onclick="find()" value="Find"/> <span id="result"></span>