Displaying the property of the selected objects in an array in Angular

Question

I am trying to display the id of the selected objects of the employee array which is a dropdown.

export const employees = [
 {index:1,'name':"Josh",'id':"102A"},
 {index:2,'name':"Sam",'id':"598A"},
 {index:3,'name':"Cal",'id':"345A"},
 {index:4,'name':"Elise",'id':"66A"}
];

<app-dropdown
  [(ngModel)]="project.employees"
  [items]="employeesDropdownItems"
  [multiselect]="true"
  (ngModelChange)="onEmployeeChanged()"
  placeholder="Select employee"
>
</app-dropdown>

{{project.employees.id}} doesn't seem to work. Is there any other way to achieve this?

Thanks!

employees is an array and you are trying to get the id of a specific employees an array withouth using index ! project.employees.id — DEV
– DEV, Commented Dec 27, 2021 at 16:19
App-dropdown creates a multi-select dropdown element. @VimalPatel — NoobStackDeveloper
– NoobStackDeveloper, Commented Dec 27, 2021 at 17:26
How do you know what items are selected? Do you have any array to store it? — Deepak
– Deepak, Commented Dec 27, 2021 at 17:34

Deepak · Accepted Answer · 2021-12-28 04:44:40Z

You are trying to print the id of the employees using {{project.employees.id}}. But the problem is that employees array has elements of type { index: number, name: string, id: string }. To retrieve any element in this array, you need to know its index. If you are looking to print the first object, you need to provide the starting index, like project.employees[0]. If you just wish to print the id of the first object, you use project.employees[0].id. Similarly, if you wish to print the id of all the elements in the array, you need to loop over the entire array and print its id.

const employees = [
 {index:1,'name':"Josh",'id':"102A"},
 {index:2,'name':"Sam",'id':"598A"},
 {index:3,'name':"Cal",'id':"345A"},
 {index:4,'name':"Elise",'id':"66A"}
];


let toPrint = [];
employees.forEach(employee => toPrint.push(employee.id))
console.log(toPrint)

Or, a more simplified one in JavaScript is map:

const employees = [
 {index:1,'name':"Josh",'id':"102A"},
 {index:2,'name':"Sam",'id':"598A"},
 {index:3,'name':"Cal",'id':"345A"},
 {index:4,'name':"Elise",'id':"66A"}
];

let toPrint = employees.map(employee => employee.id)
console.log(toPrint)

In your case, you can write the above logic in your onEmployeeChanged() function like:

public toPrint: any;
onEmployeeChanged(){
  // Your existing code here

  // Write your code to handle employee id to print
  this.toPrint = this.project.employees.map(employee => employee.id)).join(", ")
}

And in your HTML:

{{toPrint}}

Collectives™ on Stack Overflow

Displaying the property of the selected objects in an array in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related