How to extract data from ng-multiselect-dropdown list in number format instead of Array

Issue

I need to send object through post from angular UI to REST API. In Angular UI,I am capturing dealid from multiselect dropdown using ng-multiselect-dropdown component. and my deal object of class DealApi looks like this:

export class DealApi{
        applicationReceived: any;
        dealid: number;
        expectedReleaseDate: Date;
        plannedRatingCommitteeDate: Date;
        priority: any;
        releaseTimeCriteria: any;
        subsequentRating: any;

}

in app.component.html:

<ng-multiselect-dropdown name="dropdown"
             [placeholder]="'Enter Deal Name or Deal ID'"
             [settings]="dropdownSettings"
             [data]="dropdownList" 
             [(ngModel)]="deal.dealid"
              (onSelect)="onItemSelect($event)"
              (onDeSelect)="onItemSelect($event)"
              (onSelectAll)="onSelectAll($event)"
              (onDeSelectAll)="onDeSelectAll($event)" disabled>
            </ng-multiselect-dropdown>
          </td>

And in app.component.ts:

export class AppComponent implements OnInit {
  title = 'angular-app';
  name = 'angular-app';
  datePickerConfig: Partial<BsDatepickerConfig>;
  dropdownList = [];
  selectedItems: any;
  dropdownSettings:IDropdownSettings;
  dealid : number;
  PlannedRatingCommitteeDate: Date;
  ExpectedReleaseDate: Date;
  ReleaseTimeCriteria: any;
  SubsequentRating: any;
  Priority: any;
  ApplicationReceived: any;
  deal:DealApi= new DealApi();
  constructor(private service:HttpclientService) {}
  ngOnInit(){
  this.dropdownList = [
    {item_id:1, item_text: "Dealname1 (82034890)"},
    {item_id:2, item_text: "Dealname2 (82034890)"},
    {item_id:3, item_text: "Dealname3 (82034890)"},
    {item_id:4, item_text: "Dealname4 (82034890)"}
  ];
  this.selectedItems = [
    {item_id: 2, item_text: "Dealname1 (82034890)"},
      {item_id: 3, item_text: "Dealname2 (82034890)"}
  ];
   this.dropdownSettings = {
     singleSelection: true,
     enableCheckAll:true,
     idField: 'item_id',
     textField: 'item_text',
     selectAllText: 'Select All',
     unSelectAllText: 'UnSelect All',
     itemsShowLimit: 3,
     allowSearchFilter: true
   };

and On Angular UI, When I click save button it calls save() method which calls getdeals(this.deal) like below:

this.service.getdeals(this.deal).subscribe((data:any)=>{alert("Deal added successfully.");});

and in httpClient.service.ts,I am calling post while passing deal object:

public getdeals(deal: DealApi)
  {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Accept': 'application/json'
      })
    };
  const url = 'http://localhost:8080/deals';
  console.log(deal);
     return this.http.post(url,deal,httpOptions);
}

IN OUTPUT: I am getting deal object as:

{
dealid: [{item_id: 3, item_text: "Dealname3 (82034890)"}]
plannedRatingCommitteeDate: "2020-04-05T04:00:00.000Z"
expectedReleaseDate: "2020-04-19T04:00:00.000Z"
releaseTimeCriteria: "Market open"
subsequentRating: "No"
priority: "High"
applicationReceived: "No"
}

and it is throwing error: JSON parse error: Cannot deserialize instance of int out of START_ARRAY token; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of int out of START_ARRAY token↵ at [Source: (PushbackInputStream)

I need only item_id to be assigned to dealid and dealid should come as number instead of array. How can I modify my code for this?

ANY HELP WOULD BE APPRECIATED!

Solution

create one parameter in component.ts such as

selected:any;

then in html change model to this

<ng-multiselect-dropdown name="dropdown"
             [placeholder]="'Enter Deal Name or Deal ID'"
             [settings]="dropdownSettings"
             [data]="dropdownList" 
             [(ngModel)]="selected"
              (onSelect)="onItemSelect($event)"
              (onDeSelect)="onItemSelect($event)"
              (onSelectAll)="onSelectAll($event)"
              (onDeSelectAll)="onDeSelectAll($event)" disabled>
            </ng-multiselect-dropdown>
          </td>

then in onItemSelect($event) function assign your id

onItemSelect(event){
  if(this.selected.length>0){
    this.deal.dealid=this.selected[0].id;
  }
}

Answered By - mr. pc_coder