title: Asynchronous mapping of Array elements Javascript
body: <p>I have an Object as follows:</p>
  
  <pre><code>  let  data =  {
    "requested_by": 26,
    "request_type": "regularization",
    "employee_ids": [
      26
    ],
    "request_data": [
      {
        "from_date": "2020-03-14",
        "from_time": "04:18",
        "to_time": "09:45",
        "comment": "a",
        "to_date": "2020-03-14"
      },
  
  
    ]
  }
  </code></pre>
  
  <p>In this the request_data is Array of objects which can have n number of objects let's assume it is 8, Now I wanted to make chunks of it by 6 so a request_data of 6 objects and request_data of 2 objects and the other keys replicated as is. Now with these chunks i'd make two API calls so what I did was</p>
  
  <pre><code>  requestBatches.map((item: any) =&gt; {
            console.log(item)
            data['request_data'] = item
            console.log(data)
             requestDataChunks.push(this.createRequest({ data, files }))
          })
  </code></pre>
  
  <p>The requestBatches has an Array of two chunks of request_data key one with 6 and other with 2,
  I wanted to make an API call with these two different chunks so I mapped it to the key and made push it to an array and will later use Promise.all to resolve every promise</p>
  
  <p>My Problem:
  Every time in this map function, I get the second chunk i.e the last element in requestBatches Array in data['request_data'] though the console.log(item) shows correct chunks
  The API gets called two times which is correct but the payload data ->request_data key has the last element of requestBatches in both the request the first element is getting overwritten because of some asynchronous flow.</p>
  
  <p>UPDATE:
  I saw some weird behaviour after making chunks</p>
  
  <pre><code> function chunkArray(myArray: Array&lt;any&gt;, chunk_size: number) {
        let results = []
  
        while (myArray.length) {
          results.push(myArray.splice(0, chunk_size))
        }
  
        return results
      }
  </code></pre>
  
  <p>this is the function I am using to chunk array of equal sizes and when I pass my array to this function the key in the data object request_data is also getting updated with 0 i.e after splice because of while loop why is it this reactive behaviour I tried taking another variable and then doing it but the original element still got updated</p>