CODEWITHSUNDEEP
javascriptvue.jsvuejs2
SPQRInc
SPQRInc

Reputation: 198

Join nested array and output comma-separated list

I would like to print a comma-separated list of items in an array.

Example:

[
{value: 1, text: 'one},
{value: 2, text: 'two},
{value: 3, text: 'three},
{value: 4, text: 'four},
]

I thought about solving this with Array.join (https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/join) - but this is not working with arrays containing more information, as the output is [object Object].

How can I "pick" the value and join the value so I'm getting one, two, three, four as output?

Upvotes: 0

Views: 675

Answers (2)

SPQRInc
SPQRInc

Reputation: 198

Found a solution:

{{array.map(x =>  x.text).join(', ')}}

Upvotes: 1

Nick
Nick

Reputation: 16576

You'll want to map over your array to grab the text prop out of it and then apply the desired join.

const arr = [
  {value: 1, text: 'one'},
  {value: 2, text: 'two'},
  {value: 3, text: 'three'},
  {value: 4, text: 'four'}
];

const output = arr.map(el => el.text).join(', ');

console.log(output);

Upvotes: 2

Related Questions