title: Angular5: batch calls to get data for a filed in a json array
body: <p>I have an array with json data in the below format</p>
  
  <pre><code>staff = [
  { "id"   : 1,
     "name" : "Robert"
  },
  { "id"   : 2,
     "name" : "Peter"
  }
  ]
  </code></pre>
  
  <p>I am trying to get the designation of these people. There is an API which accepts group of ids. I am trying to get designations in batches of 30. i.e send first 30 objects and get their designations and go on.. I tried keeping a for loop and pass 30 objects but unsuccessful.</p>
  
  <p>Designation API gives data in the below format.</p>
  
  <pre><code>[
    {
      "staffId": "26",
      "designation": "PRA"
    },
    {
      "staffId": "25",
      "designation": "MRA"
    }
  ]
  </code></pre>
  
  <p>Result json</p>
  
  <p>staff = [
      { "id"   : 1,
         "name" : "Robert",
      "staffDesignation": "PRA"
      },
      { "id"   : 2,
         "name" : "Peter",
      "staffDesignation": "MRA"
      }
      ]</p>
  
  <p>So here for every 30 batches of designations that I get, I need to update the staff record with that value.</p>
  
  <p>staff.component.ts</p>
  
  <p>for (let i = 0; i &lt;= this.staff.length; i++) {
    this.staffService.getStaffDesignator(//should pass 30 objects).subscribe((designator) => { //Here pass 30 objects
     //update designator logic
    },
      (err) => {</p>
  
  <pre><code>})
  </code></pre>
  
  <p>}</p>
  
  <p>staff.service.ts</p>
  
  <pre><code>getStaffDesignator(staff)
  {
  
      staff.forEach((staff, index) =&gt; {
        if (index === 0) {
          url = url + `?contactId=${staff.id}`;
        }
        else {
          url = url + `&amp;contactId=${staff.id}`
        }
      }) //loop through the objects to get the staff id to pass to the APIcall
  
      return this.http.get(url, this.options)
        .map((res: Response) =&gt; {
          return res.json();
        })  //API call to get designations for staff
  
  }
  </code></pre>