Merge Map operator in Angular usage

Question

I'm not able to return the inner observable

createItem -> Will create the item (POST request) The resposne form that item contains ID , by using that ID I'm adding attachemnts to the Item.

addAttachmentstoItem -> POST request

selected file -> contains attached files in the form , we are looping through each file & calling the addAttachmentstoItem post request.

Merge Map operator for inner observable isn't able to return the observable

this.sharepointService.createItem(this.itemData)
  .pipe(
    mergeMap  (( response : Response) => {
      this.lastItemCreatedId = response['d'].ID
      this.selectedfile.forEach( (file) => {
        let filename = file.name
        let url = "_spPageContextInfo.webAbsoluteUrl"+"_api/web/lists/getByTitle('"+ libraryName +"')/items("+this.lastItemCreatedId+")/AttachmentFiles/add(FileName = '"+filename+"')"
      return this.sharepointService.addAttachementstoItem(url,filename).subscribe( response => console.log("File Uploaded"))
 })
    }),
  ).subscribe()

code in the sharepointService :

 createItem(itemData): Observable<Object> {
 console.log("Inside postItem")
 console.log(itemData.reqno)
  var body = {
    "__metadata" : {'type' : 'SP.Data.CustomListListItem'},
    'Title' : 'first',
    'Requisition_x0020_Number' : itemData.reqno,
    'Site_x0020_Security_x0020_Groups' : itemData.sitesecuritygroups,
    'User_x0020_Security_x0020_Groups' :itemData.usersecuritygroups,
    'Attachments' : itemData.selectedfile
  }
  return this.http.post(this.baseUrl+"_api/web/lists/getbytitle('CustomList')/items",body)
 }

 addAttachementstoItem(url,selectedfile): Observable<Object> {
   console.log(url)
   return this.http.post(url,selectedfile)
 }

I'm getting the error : Argument of type '(response: Response) => void' is not assignable to parameter of type '(value: Response, index: number) => ObservableInput'. Type 'void' is not assignable to type 'ObservableInput'.

Michael Westcott Michael Westcott · Accepted Answer · 2019-07-04T12:01:46

Your callback needs to return an observable, currently it's returning nothing. You can use the forkJoin (https://www.learnrxjs.io/operators/combination/forkjoin.html) operator to create an observable which will emit once all the observables you're creating fron the addAttachmentsToItem complete and return that. Something like the below:

this.sharepointService.createItem(this.itemData)
  .pipe(
    mergeMap(( response : Response) => {
      this.lastItemCreatedId = response['d'].ID
      const obs = this.selectedfile.map((file) => {
        let filename = file.name
        let url = "spPageContextInfo.webAbsoluteUrl"+"_api/web/lists/getByTitle('"+ libraryName +"')/items("+this.lastItemCreatedId+")/AttachmentFiles/add(FileName = '"+filename+"')"
        return this.sharepointService.addAttachementstoItem(url,filename)
       })
       return forkJoin(...obs);
    }),
  ).subscribe()

Merge Map operator in Angular usage

1 Answers