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?

Ankit Agarwal · Accepted Answer · 2018-08-23 09:10:28Z

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

edited Aug 23, 2018 at 9:10

answered Aug 23, 2018 at 8:49

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

Comments

31piy · Accepted Answer · 2018-08-23 09:04:29Z

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

edited Aug 23, 2018 at 9:04

answered Aug 23, 2018 at 8:44

31piy

23.9k6 gold badges51 silver badges69 bronze badges

2 Comments

user9945420 Over a year ago

is there a reason for these changes or do you just try to optimize it?

31piy Over a year ago

@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.

Collectives™ on Stack Overflow

convert array to string after converting array values

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related