Need to pass all data field which bind in Ng-multiselect-dropdown through formControlName-CodePudding

Multiselect dropdown only passes 2 fields id-field and the text field. But I need all the fields to pass through the form control name how can I solve this issue?

HTML

<ng-multiselect-dropdown
             formControlName="benefitId"
             
             [(ngModel)]="benefitId"
             [placeholder]="'Benefits'"
             [data]="BenefitList"
             [settings]="dropdownSettings"
           >
</ng-multiselect-dropdown>

Typescript

this.dropdownSettings = {
    singleSelection: false,
    idField: 'benefitId',
    textField: 'name',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 1,
    allowSearchFilter: true,
};

BenefitList:

"Status": true,
"Message": "All Benefits fetched",
"Info": [
   {
          "benefitId": 1,
          "name": "Award Winning",
          "image": "**image url**"
   },
   {
          "benefitId": 2,
          "name": "Award Winning2",
          "image": "**image url**"
   }
]

Output:

benefitId: 
Array(2)
0: 
{benefitId: 1, name: 'Award Winning'}
1: 
{benefitId: 2, name: 'Eco-Friendly'}
length: 2
[[Prototype]]: 
Array(0)

Output needed:

benefitId: 
Array(2)
0: 
{benefitId: 1, name: 'Award Winning',image:'**image url**'}
1: 
{benefitId: 2, name: 'Eco-Friendly',image:'**image url**'}
length: 2
[[Prototype]]: 
Array(0)

How can I solve this issue? or is there any other option for multiselect dropdown which is easy to access

CodePudding user response：

Try this code for get all data fields into a new array

var datalistfromApi=[
   {
          "benefitId": 1,
          "name": "Award Winning",
          "image": "*image url*"
   },
   {
          "benefitId": 2,
          "name": "Eco-Friendly",
          "image": "*image url*"
   }
];

var selectedValues=[
                    {benefitId: 1, name: 'Award Winning'},
                    {benefitId: 2, name: 'Eco-Friendly'}
                   ];

// A comparer used to determine if two entries are equal.
const isSameUser = (a, b) => a.benefitId === b.benefitId && a.name === b.name;

// Get items that only occur in the left array,
// using the compareFunction to determine equality.
const onlyInLeft = (left, right, compareFunction) => 
  left.filter(leftValue =>
    right.some(rightValue => 
      compareFunction(leftValue, rightValue)));

const onlyInA = onlyInLeft(datalistfromApi, selectedValues, isSameUser);


const result = [...onlyInA];

console.log(result);