I want to modify the following forEach result with values from another array but I can't get it working.
const BbDescriptionDictionary = ['AAA' , 'BBB', 'CCC',]
const boardBasisOptionsModified = [];
this.boardBasisOptions.forEach( (value) => {
boardBasisOptionsModified.push({
"key": value, "value": BbDescriptionDictionary[value]
});
});
this.boardBasisOptions = boardBasisOptionsModified;
You can give .forEach a second parameter, indicating the index of boardBasisOptions. Like this:
this.boardBasisOptions.forEach( (value, index) => {
boardBasisOptionsModified.push({
"key": value, "value": BbDescriptionDictionary[index]
});
});
You may want to add the index parameter in your forEach loop:
(I also initialized the boardBasisOptions with some values)
See this working snippet:
boardBasisOptions = ['key1', 'key2', 'key3'];
const BbDescriptionDictionary = ['AAA', 'BBB', 'CCC', ]
const boardBasisOptionsModified = [];
this.boardBasisOptions.forEach((value, index) => {
boardBasisOptionsModified.push({
"key": value,
"value": BbDescriptionDictionary[index]
});
});
this.boardBasisOptions = boardBasisOptionsModified;
console.log("boardBasisOptions:");
console.log(this.boardBasisOptions);You're trying to access the value inside your BbDescriptionDictionay array using the value and not the index. You have to use the index to access the value of an array.
Just add index as a second parameter of your forEach function.
this.boardBasisOptions.forEach( (value, index) => {
boardBasisOptionsModified.push({
"key": value, "value": BbDescriptionDictionary[index]
});
});
By taking the index, you could use Array#map instead of Array#push.
const BbDescriptionDictionary = ['AAA', 'BBB', 'CCC',]
this.boardBasisOptions = this
.boardBasisOptions
.map((key, index) => ({ key, value: BbDescriptionDictionary[index] }));
You should just use Array.prototype.map() to create a new, mutated array rather than worrying about creating temporary arrays, mutating them and then assigning them.
const BbDescriptionDictionary = ['AAA' , 'BBB', 'CCC',]
// Map runs the function on each array item and returns a new array
// with mutated the return value of that function
// Note: ({ ... }) is a shorthand way of returning a value
// (object in this case) without a function body {}
this.boardBasisOptions = this.boardBasisOptions.map((key, index) => ({
// Shorthand way of assigning a variable to an object using the var
// name as the key
key,
value: BbDescriptionDictionary[index]
})
Its is considered bad practice to override properties like this, so I would return the original boardBasisOptions to a a new property and use that later on:
const BbDescriptionDictionary = ['AAA' , 'BBB', 'CCC',]
this.boardBasisOptionsWithDescriptions = this.boardBasisOptions.map((key, index) => ({
key,
value: BbDescriptionDictionary[index]
})
Hope that helps 👍
boardBasisOptions?BbDescriptionDictionary[value]will translate toBbDescriptionDictionary['AAA'], while it should beBbDescriptionDictionary[0].