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 · Accepted Answer · 2019-07-04 13:16:09Z

2

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()

edited Jul 4, 2019 at 13:16

answered Jul 4, 2019 at 12:01

Michael Westcott

4803 silver badges6 bronze badges

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

8 Comments

Shivaay Over a year ago

Thanks Michael for your suggestion . I have one doubt , we are not subscribing to the second post request method addAttachmentstoItem. Instead of subscribing we are using return. Why is this so ?

Michael Westcott Over a year ago

you don't need to subscribe to the inner observables, you need to return it as that's what merge map is expecting. You're effectively creating one observable out of two which is why you only need to subscribe once at the end.

Shivaay Over a year ago

After code change , I'm getting this error on return forkJoin(obs); Argument of type 'void' is not assignable to parameter of type 'ObservableInput<unknown>

Michael Westcott Over a year ago

Have you imported forkJoin from rxjs?

Michael Westcott Over a year ago

Without seeing the updates you've made, based on the exception I'm guessing you haven't changed the forEach to a map

|

Collectives™ on Stack Overflow

Merge Map operator in Angular usage

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related