[英]how to find a value in array of objects with key value pairs
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.
TypeError:原始颜色不是功能错误。
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().
我认为对象数组的结构使我对array.find()的正确语法不满意。 Thanks.
谢谢。
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]);
Another way to do it without Object.keys() can be like below: This is slight variation from Kamil's solution. 没有Object.keys()的另一种方法如下所示:这与Kamil解决方案略有不同。
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])
const baseColor1 = $("[name='color1']").val();
const modelColor1Object = baseLayerColors.find(colorObj => colorObj[baseColor1]);
const modelColor1Value = modelColor1Object[baseColor1];
The variable baseColors
is an array of objects, therefore you need to use JavaScript's Bracket Notation to find the correct key. 变量
baseColors
是一个对象数组,因此您需要使用JavaScript的括号表示法来查找正确的键。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.