angular - Angular2 : Chain http requests with concat() -

i have difficulties chain several http requests.

first, request defined in service method returns cold observable.

formpartservice

submitformpart(id: string, part: string, data: any) {      let body = json.stringify({         claimfileid: claimfileid,         part: part,         data: data     });      return this.http.post('/form-part', body)                     .map( (res) => {                              let body = res.json();                             if (body.data){                                 return body.data;                             }                         }                      ); } 

i have variable number of form part submit depending if dirty or not, iterate on array filled these forms. each call not dependant of return of previous call, need in end returned after last call

to this, tried concat() operator seems me more adapted case switchmap(). here's attempt :

component

var formtosubmit = [...]; // contains dirty forms sent backend var id = '123'; var stream$; // contain first observable  formtosubmit.foreach((form, index) => {     if (index === 0) {         // set stream$ first observable         stream$ = this.formpartservice.submitformpart(id, form.getpartname(), form.getvalues())     }     else {         // concat first observable others         let obs$ = this.formpartservice.submitformpart(id, form.getpartname(), form.getvalues());         stream$.concat( obs$ );     } });  stream$.subscribe((globalform) => {     console.log(globalform); }) 

unfortunately doesn't work. when debug step step, goes well, have stream$ set observer, stream$.concat() doesn't break. in network only first request, not chained.

what i'm doing wrong ? lot

edit replaced code example kwintep provided me optimize request chaining. unfortunately, requests executed 1 one, once gets done have following error unknown type returned :

core.umd.js?e2a5:3462 exception: unknown type returnederrorhandler.handleerror @ core.umd.js?e2a5:3462next @ core.umd.js?e2a5:6924schedulerfn @ core.umd.js?e2a5:6172safesubscriber.__tryorunsub @ vm1077851:223safesubscriber.next @ vm1077851:172subscriber._next @ vm1077851:125subscriber.next @ vm1077851:89subject.next @ vm1077847:55eventemitter.emit @ core.umd.js?e2a5:6164onerror @ core.umd.js?e2a5:6388onhandleerror @ core.umd.js?e2a5:6263zonedelegate.handleerror @ zone.js?fad3:207zone.runtask @ zone.js?fad3:139zonetask.invoke @ zone.js?fad3:304 core.umd.js?e2a5:3467 original stacktrace:errorhandler.handleerror @ core.umd.js?e2a5:3467next @ core.umd.js?e2a5:6924schedulerfn @ core.umd.js?e2a5:6172safesubscriber.__tryorunsub @ vm1077851:223safesubscriber.next @ vm1077851:172subscriber._next @ vm1077851:125subscriber.next @ vm1077851:89subject.next @ vm1077847:55eventemitter.emit @ core.umd.js?e2a5:6164onerror @ core.umd.js?e2a5:6388onhandleerror @ core.umd.js?e2a5:6263zonedelegate.handleerror @ zone.js?fad3:207zone.runtask @ zone.js?fad3:139zonetask.invoke @ zone.js?fad3:304 core.umd.js?e2a5:3468 typeerror: unknown type returned     @ object.subscribetoresult (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:297:2), <anonymous>:69:27)     @ combinelatestsubscriber._complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:797:2), <anonymous>:108:46)     @ combinelatestsubscriber.subscriber.complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)     @ mergemapsubscriber.notifycomplete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:155:30)     @ innersubscriber._complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:315:2), <anonymous>:30:21)     @ innersubscriber.subscriber.complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)     @ mapsubscriber.subscriber._complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:132:26)     @ mapsubscriber.subscriber.complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)     @ xmlhttprequest.onload (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:261:2), <anonymous>:1499:42)     @ zonedelegate.invoketask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:236:37)     @ object.oninvoketask (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6233:41)     @ zonedelegate.invoketask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:235:42)     @ zone.runtask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:136:47)     @ xmlhttprequest.zonetask.invoke (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:304:33)   -------------   elapsed: 336 ms; at: mon nov 14 2016 13:58:04 gmt+0100 (paris, madrid)   -------------       @ object.onscheduletask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2666:2), <anonymous>:76:18)     @ zonedelegate.scheduletask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:213:49)     @ zone.scheduleeventtask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:156:39)     @ zoneawareaddlistener (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:773:14)     @ xmlhttprequest.addeventlistener (eval @ createnamedfn (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2)), <anonymous>:3:43)     @ observable.eval [as _subscribe] (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:261:2), <anonymous>:1540:22)     @ observable.subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:56:27)     @ observable._subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:114:28)     @ mapoperator.call (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:273:2), <anonymous>:54:23)     @ observable.subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:53:22)     @ object.subscribetoresult (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:297:2), <anonymous>:21:27)     @ mergemapsubscriber._innersub (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:120:38)     @ mergemapsubscriber._trynext (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:117:14)     @ mergemapsubscriber._next (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:100:18)     @ mergemapsubscriber.notifycomplete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:152:18)     @ innersubscriber._complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:315:2), <anonymous>:30:21)     @ innersubscriber.subscriber.complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)     @ mapsubscriber.subscriber._complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:132:26)     @ mapsubscriber.subscriber.complete (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:114:18)     @ xmlhttprequest.onload (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:261:2), <anonymous>:1499:42)     @ zonedelegate.invoketask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:236:37)     @ object.oninvoketask (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6233:41)     @ zonedelegate.invoketask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:235:42)     @ zone.runtask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:136:47)     @ xmlhttprequest.zonetask.invoke (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:304:33)   -------------   elapsed: 861 ms; at: mon nov 14 2016 13:58:03 gmt+0100 (paris, madrid)   -------------       @ object.onscheduletask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2666:2), <anonymous>:76:18)     @ zonedelegate.scheduletask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:213:49)     @ zone.scheduleeventtask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:156:39)     @ zoneawareaddlistener (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:773:14)     @ xmlhttprequest.addeventlistener (eval @ createnamedfn (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2)), <anonymous>:3:43)     @ observable.eval [as _subscribe] (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:261:2), <anonymous>:1540:22)     @ observable.subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:56:27)     @ observable._subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:114:28)     @ mapoperator.call (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:273:2), <anonymous>:54:23)     @ observable.subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:53:22)     @ object.subscribetoresult (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:297:2), <anonymous>:21:27)     @ mergemapsubscriber._innersub (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:120:38)     @ mergemapsubscriber._trynext (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:117:14)     @ mergemapsubscriber._next (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:100:18)     @ mergemapsubscriber.subscriber.next (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:131:2), <anonymous>:89:18)     @ arrayobservable._subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:370:2), <anonymous>:114:28)     @ arrayobservable.observable.subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:56:27)     @ observable._subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:114:28)     @ mergemapoperator.call (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:430:2), <anonymous>:75:23)     @ observable.subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:53:22)     @ observable._subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:114:28)     @ combinelatestoperator.call (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:797:2), <anonymous>:74:23)     @ observable.subscribe (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:113:2), <anonymous>:53:22)     @ editorcomponent.submitall (eval @ <anonymous> (http://192.168.33.10:7777/app.js:1220:2), <anonymous>:81:18)     @ _view_editorcomponent0._handle_click_52_0 (editorcomponent.ngfactory.js:602:28)     @ eval (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:9698:28)     @ eval (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:209:2), <anonymous>:1877:40)     @ eval (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:209:2), <anonymous>:1990:115)     @ zonedelegate.invoke (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:203:28)     @ object.oninvoke (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6242:41)     @ zonedelegate.invoke (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:202:34)     @ zone.runguarded (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:110:47)     @ ngzoneimpl.runinnerguarded (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6271:82)     @ ngzone.runguarded (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:101:2), <anonymous>:6504:77)     @ htmlbuttonelement.outsidehandler (eval @ <anonymous> (http://192.168.33.10:7777/vendor.js:209:2), <anonymous>:1990:83)     @ zonedelegate.invoketask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:236:37)     @ zone.runtask (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:136:47)     @ htmlbuttonelement.zonetask.invoke (eval @ <anonymous> (http://192.168.33.10:7777/polyfills.js:2660:2), <anonymous>:304:33)errorhandler.handleerror @ core.umd.js?e2a5:3468next @ core.umd.js?e2a5:6924schedulerfn @ core.umd.js?e2a5:6172safesubscriber.__tryorunsub @ vm1077851:223safesubscriber.next @ vm1077851:172subscriber._next @ vm1077851:125subscriber.next @ vm1077851:89subject.next @ vm1077847:55eventemitter.emit @ core.umd.js?e2a5:6164onerror @ core.umd.js?e2a5:6388onhandleerror @ core.umd.js?e2a5:6263zonedelegate.handleerror @ zone.js?fad3:207zone.runtask @ zone.js?fad3:139zonetask.invoke @ zone.js?fad3:304 vm1077851:227 uncaught typeerror: unknown type returned(…) 

your code can optimised this:

// mocks http call takes 1 second complete function fakerequest(id) {   console.log('doing request id ' + id);   return rx.observable.of(id).delay(1000); }  let items = ["1", "2", "3"];  // create observable array emits every item 1 after 1 rx.observable.from(items)    // use concatmap, operator accepts function returns observable.    // subscribe observable , not take on next values    // untill observable completes.    // '1' , perform request. 1 completes    // handle next value, '2' , on.   .concatmap(     (val) => {       return fakerequest(val)    })    // use combine make sure subscription below isn't call untill    // every element in original array handled.   .combineall()    // array results every call, take last 1    // if need   .subscribe((val) => console.log(val)); 

comments inline. jsbin example here: http://jsbin.com/hequvokaya/edit?js,console