convert array to string after converting array values

Question

currently I have an array of people

const members = [{
 imgUrl: 'resources/members/xxx.png',
 name: 'xxx',
 focus: [0, 1, 2, 4, 5]
}, {
 imgUrl: 'resources/members/xxx.png',
 name: 'xxx',
 focus: [0, 1, 2, 3, 5]
}, {
 imgUrl: 'resources/members/xxx.png',
 name: 'xxx',
 focus: [4, 6, 7, 8]
}];

As you can see the focus of the members is holding an array. I use this array as a list of keys for another array (behaving like a dictionary) containing skills.

const skills = [
 'Skill 0',
 'Skill 1',
 'Skill 2',
 'Skill 3'
];

Before using my members array I want to replace this focus array with a string containing all the skills.

I want to map each focus item to a string holding the skill. The I want to convert this string array to a single string and add space after commas.

The result would be focus: 'Skill 1, Skill 3, Skill 7'

I went for this code

const members = [{
 imgUrl: 'resources/members/xxx.png',
 name: 'xxx',
 focus: [0, 2, 3]
}, {
 imgUrl: 'resources/members/xxx.png',
 name: 'xxx',
 focus: [0, 1, 2]
}, {
 imgUrl: 'resources/members/xxx.png',
 name: 'xxx',
 focus: [1, 3]
}];
const skills = [
 'Skill 0',
 'Skill 1',
 'Skill 2',
 'Skill 3'
];
const targetMembers = members.map(member =>
 member.focus.map(skillIndex => skills[skillIndex])
 .toString()
 .split(',')
 .join(', ')
);
console.log(targetMembers);

but the other member attributes get lost. What is wrong with the mapping, how can I fix it?

Answer 1

Since you are expecting change on the existing member array, use forEach() on that:

const members = [{
 imgUrl: 'resources/members/xxx.png',
 name: 'xxx',
 focus: [0, 2, 3]
}, {
 imgUrl: 'resources/members/xxx.png',
 name: 'xxx',
 focus: [0, 1, 2]
}, {
 imgUrl: 'resources/members/xxx.png',
 name: 'xxx',
 focus: [1, 3]
}];
const skills = [
 'Skill 0',
 'Skill 1',
 'Skill 2',
 'Skill 3'
];
members.forEach(member => {
 member.focus.forEach((f, index) => member.focus[index] = skills[f]);
 return member;
});
console.log(members);

Answer 2

You need to assign the result of map to member.focus. Also, use destructuring to avoid modifying the original object.

const members = [{imgUrl:'resources/members/xxx.png',name:'xxx',focus:[0,2,3]},{imgUrl:'resources/members/xxx.png',name:'xxx',focus:[0,1,2]},{imgUrl:'resources/members/xxx.png',name:'xxx',focus:[1,3]}];
const skills = ['Skill 0','Skill 1','Skill 2','Skill 3'];
const targetMembers = members.map(({...member}) => {
 member.focus = member.focus.map(f => skills[f]).join(', ');
 return member;
});
console.log(targetMembers);

• user9945420: is there a reason for these changes or do you just try to optimize it?
• 31piy: @MHComputech -- You are mapping member.focus but aren't assigning it back to a property. I used destructuring in the callback to avoid modifications to the original object. There is not much of optimization here.