Dynamically return specific attribute from an object - reactjs

Question

I'm trying to create a function that will return the needed attribute from an object.
The object will look like this:
export var Characters = [
{
id: 1,
Name: "Abe",
HitPointValue: "124",
StrengthValue: "12",
IntelligenceValue: "14",
WisdomValue: "16",
DexterityValue: "12",
ConstitutionValue: "10",
CharismaValue: "17",
Avatar: require('./images/avatar_7.jpg')
}
]
I tried this:
export function getStat(id, stat) {
var idx = Characters.findIndex((val) => val.id == id);
return Characters[idx].stat;
}
For example, let's say I need to get the "WisdomValue" of this object.
So I call it like this:
<Text style={[styles.stats]}>
{"\n"}
Wisdom Value: {getStat(1, 'WisdomValue')}{"\n"}
</Text>
But I just get an error 'undefined is not an object'
How can I get just one specific attribute, but in a dynamic way? So I don't have to write a separte function like, getHitPointValue(id), get StrengthValue(id), etc...
thanks!

Answer 1

Use [] instead of using dot notation, because you are trying to access a value by a dynamic key.
Check this snippet:
var Characters = [
{
id: 1,
Name: "Abe",
HitPointValue: "124",
StrengthValue: "12",
IntelligenceValue: "14",
WisdomValue: "16",
DexterityValue: "12",
ConstitutionValue: "10",
CharismaValue: "17",
}
]
function getStat(id, stat) {
var idx = Characters.findIndex((val) => val.id == id);
if(idx >= 0)
return Characters[idx][stat];
else return "not found"
}
console.log(getStat(1, 'WisdomValue'));
console.log(getStat('15', 'abc'));

Answer 2

var Characters = [
{
id: 1,
Name: "Abe",
HitPointValue: "124",
StrengthValue: "12",
IntelligenceValue: "14",
WisdomValue: "16",
DexterityValue: "12",
ConstitutionValue: "10",
CharismaValue: "17",
}
]
function getStat(id, stat) {
// you can directly find the object rather going through the array index
var character = Characters.find((val) => val.id == id);
// care for non existing characters
if (!character) {
throw new Error(`Character with id ${id} does not exist`);
}
// care for non existing stats
if (!character.hasOwnProperty(stat)) {
throw new Error(`Stat ${stat} is not available for character with id ${id}`);
}
// use the [] notation as opposed to the dot notation when evaluating dynamic property names
return character[stat];
}
console.log(`Wisdom Value: ${getStat(1, 'WisdomValue')}`);
console.log(`Charisma Value: ${getStat(1, 'CharismaValue')}`);
try {
console.log(getStat(2, 'Name'));
} catch (e) {
console.log(e.message);
}
try {
console.log(getStat(1, 'PersuasionValue'));
} catch (e) {
console.log(e.message);
}