Angular5: batch calls to get data for a filed in a json array

Question

I have an array with json data in the below format

staff = [
{ "id"   : 1,
   "name" : "Robert"
},
{ "id"   : 2,
   "name" : "Peter"
}
]

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.

Designation API gives data in the below format.

[
  {
    "staffId": "26",
    "designation": "PRA"
  },
  {
    "staffId": "25",
    "designation": "MRA"
  }
]

Result json

staff = [ { "id" : 1, "name" : "Robert", "staffDesignation": "PRA" }, { "id" : 2, "name" : "Peter", "staffDesignation": "MRA" } ]

So here for every 30 batches of designations that I get, I need to update the staff record with that value.

staff.component.ts

for (let i = 0; i <= this.staff.length; i++) { this.staffService.getStaffDesignator(//should pass 30 objects).subscribe((designator) => { //Here pass 30 objects //update designator logic }, (err) => {

})

}

staff.service.ts

getStaffDesignator(staff)
{

    staff.forEach((staff, index) => {
      if (index === 0) {
        url = url + `?contactId=${staff.id}`;
      }
      else {
        url = url + `&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) => {
        return res.json();
      })  //API call to get designations for staff

}

So will the id in staff array equal to the staffId in the designation array? Asking as you have given different values of those in your OP. And will this API return the data in an order in which the objects are present in the staff array? — SiddAjmera
– SiddAjmera, Commented Nov 8, 2018 at 19:00
@SiddAjmera yes.. we get the key as staffId from the API call.. which is same as id in the staff record. — indra257
– indra257, Commented Nov 8, 2018 at 19:01
@indra257 In result josn how could you mange name in that? And you want to update key value as per result josn. Am I right ? — Sachin Shah
– Sachin Shah, Commented Nov 8, 2018 at 19:04
@indra257 So basically you want to first call all API in batch of 30 and then you want to update key and value. Am I right ? — Sachin Shah
– Sachin Shah, Commented Nov 8, 2018 at 19:14

Sachin Shah · Accepted Answer · 2018-11-09 18:43:07Z

0

While you get res from API call then you can start to work in filter array process.

var filterArray = [];

this.http.post(url , param , header , function(err , response) => {
    // First way is to use map
    // You can use for loop 
    for(let i = 0 i < response.length ; i++){
         var obj = {
             id: response[i].staffId,
             name: response[i].name,
             staffDesignation: response[i].designation,
         }
         this.filterArray.push(obj);

         // Now you can call next API for another batch... 
    }
})

In this case , I suggest you can use this below structure.

step1 : Make a array of 30 batches.

step2 : Use for loop with Observable.

for(let i = 0 ; i < this.array.length ; i++){       //Each i has batch of 30.

     // Hear observable will work as a promise in for loop to make call in sync.
     return new Observable((observer) => {
          return http.post(url , param , option)...

         //Once you got data from API use my above code to filter your
         // Key and value from res. 

        observable.next();
        observable.complete(); // It will go for call next batch... 
     })
}

edited Nov 9, 2018 at 18:43

answered Nov 8, 2018 at 19:30

Sachin Shah

4,5634 gold badges26 silver badges55 bronze badges

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

4 Comments

indra257 Over a year ago

I don't think we are making calls in batches of 30

Sachin Shah Over a year ago

@indra257 I have update my answer. Please check it. :)

indra257 Over a year ago

Thanks. I don't see i has a batch of 30. Am I missing something?

Sachin Shah Over a year ago

That you have to set batch from your side. We are just help you in idea.

SiddAjmera · Accepted Answer · 2018-11-08 20:52:40Z

0

Considering your staff data as:

staff = [{
    "id": 1,
    "name": "Robert"
  },
  {
    "id": 2,
    "name": "Peter"
  }
]

And your API returns the data in the same order in which it was requested,

You can get the staffIds as:

staffIds = staff.map(item => item.id);

Once you call your API and get the response, you can then merge the response with the staff array like this:

resultingArray = Object.values(
  [...staff, ...response]
  .reduce((r, { staffId, id = staffId, ...rest }) => ({
    ...r,
    [id]: { id, ...r[id], ...rest }
  }), {})
);

edited Nov 8, 2018 at 20:52

answered Nov 8, 2018 at 19:05

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

4 Comments

indra257 Over a year ago

But I need to make calls in batches. like pass first 30 objects and get their designation and repeat the process. I have nearly 1000 staff, so I have to make call in batches for better performance.

indra257 Over a year ago

I don't think here we are making calls in batches of 30

SiddAjmera Over a year ago

@indra257, I've clearly mentioned in the answer that ONCE YOU GET THE DATA, you can merge the response with the staff array. Since you haven't really shared how you're making the API call, I can't really add anything random to my answer.

indra257 Over a year ago

Thanks for the inputs. Please find the updated question with what I have tried so far. I haven't figured out how to pass objects in batches of 30. Staff service will loop through it to get ids and pass to the API

Collectives™ on Stack Overflow

Angular5: batch calls to get data for a filed in a json array

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related