JS conditional ES6 map

Question

We've found examples here of returning maps for ES6 arrays of primitives with conditionals, but we need same for an array of objects.

The source array has a topic.id, topic.name, and topic.parent_id:

topics: [
  {id: 1, name: 'test_1', parent_id 0},
  {id: 2, name: 'test_2', parent_id 0},
  {id: 1, name: 'test_child_1', parent_id 1}
]

We need to return an array of objects where the topic_id is now key 'value', and the topic.name is now key 'label' with the value having 2 non-breaking spaces appended to the beginning of it IF the topic.parent_id > 0. So for the data above, we'd like to get back:

[
  {value: 1, label: 'test_1'},
  {value: 2, label: 'test_2'},
  {value: 3, label: '&nbsp;&nbsp;test_child_1'}
]

We've tried a buch of IF's, ternaries (like the one below), but can't quite seem to nail a syntax for this that works.

 let test ="topics.map(topic => (
  {
    label: topic.parent_id > 0 : '&nbsp;&nbsp;' + topic.name ? topic.name,
    value: topic.id,
  } 
))"

Any help is appreciated!

test is a string?

Ibu
– Ibu

2018-08-25 22:09:28 +00:00
Commented Aug 25, 2018 at 22:09 — Ibu
– Ibu, Commented Aug 25, 2018 at 22:09

Ibu · Accepted Answer · 2018-08-25 22:16:10Z

3

You can use the map function this way:

let test = topics.map(function(topic){
    return {
      label:topic.parent_id > 0? '&nbsp;&nbsp;' + topic.name : topic.name,
      value: topic.id
    };
});

Update: Now that I take a good look at it, I see that you made a mistake in your tertiary operation. You reversed the position of the ? and the :. And you added double quotes so it is read as a string. Update it to this:

let test = topics.map(topic => (
  {
    label: topic.parent_id > 0 ? '&nbsp;&nbsp;' + topic.name : topic.name,
    value: topic.id,
  } 
));

answered Aug 25, 2018 at 22:16

Ibu

44k14 gold badges82 silver badges109 bronze badges

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

Comments

Naim Sulejmani · Accepted Answer · 2018-08-25 22:23:29Z

2

This as simple solution you can do as follows

var labelValues =topics.map((topic)=> ({
    label: topic.parent_id > 0 ? '  ' + topic.name : topic.name,
    value: topic.id 
}));

answered Aug 25, 2018 at 22:23

Naim Sulejmani

1,1209 silver badges10 bronze badges

1 Comment

D Durham Over a year ago

The control we are passing it to trims the label, but add the non-breaking spaces works perfectly. Thanks!

Collectives™ on Stack Overflow

JS conditional ES6 map

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related