Javascript map function chaining with asynchronous call

Question

I have following code:

var myObj = [
  {
        "idArray": [
              "org.network#xyz1",
              "org.network#xyz2"
        ]
  },
  {
        "idArray": [
              "org.network#xyz3"
        ]
  }]



getTransferRequest = (id) => {
   let respObj;
   this._fetchTransferRequestData.getTransferRequest(id).subscribe(
     data => {
       respObj = data;
     },
     err => console.log(err),
     () => {
        return JSON.parse(respObj.message)
     });
}

myObj.map(obj => (
      obj["requestObjs"] = obj.idArray.map(transferId => this.getTransferRequest(transferId.split("#")[1]))
    ))

expected value of myObj after code runs :

[
  {
        "idArray": [
              "org.network#xyz1",
              "org.network#xyz2"
        ],
        "requestObjs":[{"myid" : "xyz1"},{"myid" : "xyz2"}]
  },
  {
        "idArray": [
              "org.network#xyz3"
        ],
              "requestObjs":[{"myid" : "xyz3"}]
  }]

But I'm getting this for myObj's value :

[
  {
        "idArray": [
              "org.network#xyz1",
              "org.network#xyz2"
        ],
        "requestObjs":[undefined,undefined]
  },
  {
        "idArray": [
              "org.network#xyz3"
        ],
        "requestObjs":[undefined]
  }]

Seems, map function executes before getTransferRequest returns the value. What am I doing wrong or what modification needs to be added to make it work. _fetchTransferRequestData.getTransferRequest calls an api. (To be clear, getTransferRequest contains an api call using rxJs's subscribe function and it is an Angular 6 code.)

Where would you expect the `return respObj;` return the object to? — mplungjan, Jun 26 '18 at 05:19
Read up on the `setTimeout` documentation and general "asynchronous programming": it should quickly be obvious why it 'executes before'. — user2864740, Jun 26 '18 at 05:19
I understand the 'Call Stack' > 'Callback Queue' > and 'Event loop' cycle of async programming but what is the work around? I've tried using "promise and then" and "async and wait" still not able to solve it — Shikhar Kumar Ambashta, Jun 26 '18 at 05:36
@mplungjan returned value should be passed to the map function in the chain — Shikhar Kumar Ambashta, Jun 26 '18 at 05:39
I have changed the code to my actual code (removed setTimeout) to avoid any confusion — Shikhar Kumar Ambashta, Jun 26 '18 at 05:47
Move your map into the result, remove the return from JSON.parse and map the output. Then call a function that uses the map — mplungjan, Jun 26 '18 at 05:56
Thanks for replying.. But I am not able to follow your answer. Can you please elaborate a little more? — Shikhar Kumar Ambashta, Jun 26 '18 at 06:13

Javascript map function chaining with asynchronous call

0 Answers0