1

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?

Improve this question

2 Answers 2

Reset to default
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);

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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);

Improve this answer

2 Comments

is there a reason for these changes or do you just try to optimize it?
@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.