Join value to string in array of objects

Question

I have an array of objects in TypeScript(Angular), and I want only names from this array if details array is not empty

 [
  {name: "Joe", detail: []},
  {name: "Kevin", detail: [{salary: 2400}] },
  {name: "Peter", detail: [{salary: 2100}]}
]

I want this result Kevin,Peter in one variable

Currently I have done this

 [
  {name: "Joe", detail: []},
  {name: "Kevin", detail: [{salary: 2400}] },
  {name: "Peter", detail: [{salary: 2100}]}
].map(function(elem){
return elem.name;}).join(",")

Can anyone help me to do this in Typescript or JavaScript?

check out Array#filter()

Thomas
– Thomas

2021-01-21 09:20:14 +00:00
Commented Jan 21, 2021 at 9:20 — Thomas
– Thomas, Commented Jan 21, 2021 at 9:20

DecPK · Accepted Answer · 2021-01-21 09:20:01Z

1

const array = [
  { name: "Joe", detail: [] },
  { name: "Kevin", detail: [{ salary: 2400 }] },
  { name: "Peter", detail: [{ salary: 2100 }] },
];

const filteredArray = array.filter((obj) => {
  return obj.detail.length > 0;
});

const result = filteredArray.map((obj) => obj.name).join(", ");
console.log(result);

answered Jan 21, 2021 at 9:20

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

5 Comments

Nguyễn Văn Phong Over a year ago

Don't need to loop 2 times like this, bro.

DecPK Over a year ago

@Phong I've read your answer and it's perfect. Imran is a new contributor so I thought we should help him to give him as many options as we can.

Thomas Over a year ago

@Phong That's very much to preference, and a tradeoff between performance and readability/maintainability. I find array.filter(obj => obj.details.length > 0).map(obj => obj.name) more clear than your approach with reduce (and I've written code like that myself in the past) or if you don't want to loop twice over the array, I'd still go with a loop const result = []; for(const obj of array) if(obj.details.length > 0) result.push(obj.name); (properly formatted) over of the reduce. But as I said, it's personal preference.

DecPK Over a year ago

@Thomas very true but compatibility is a problem with for...of loop. As it is not supported by IE and every Array methods are compatible with all browser.

Thomas Over a year ago

@DeC This issue died a few years ago with the spread of build-pipelines and transpilers.

Nguyễn Văn Phong · Accepted Answer · 2021-01-21 09:56:27Z

1

I do not want Joe in the result because Joe's detail is empty. I only want kevin,Peter

You can use .reduce combines with destructure object like below to resolve it.

var data =  [
  {name: "Joe", detail: []},
  {name: "Kevin", detail: [{salary: 2400}] },
  {name: "Peter", detail: [{salary: 2100}]}
];

var result = data.reduce((acc, {name, detail}) => {
  if(detail.length > 0) acc.push(name) // condition to add name into result   
  return acc;
}, []);
console.log(result.join(","));

edited Jan 21, 2021 at 9:56

answered Jan 21, 2021 at 9:16

Nguyễn Văn Phong

14.2k19 gold badges47 silver badges65 bronze badges

5 Comments

Imran Over a year ago

I do not want Joe in result because Joe details is empty. I only want kevin,Peter

Nguyễn Văn Phong Over a year ago

Updated my answer, pls take a look at ^^!

Imran Over a year ago

Is there any better approach we can do in Angular

Nguyễn Văn Phong Over a year ago

Oops. It's the same. The original is Javascript code instead of the framework or library, bro :)

DecPK Over a year ago

concise and efficient answer.

Collectives™ on Stack Overflow

Join value to string in array of objects

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related