RxJS asynchronous loop

Question

We are doing some prototype testing where we take a json which has around 28000 records via http. We convert it to an instance of a class in Typescript and add it to an existing array.

The array is then bind to the view which re and displays the list.

this.http.get("http://localhost:8100/list.son")
            .map((res) => res.json())
            .flatMap((array, index) => array).
            .subscribe((value:any) => {
                    console.log("RENDERING");
                    this.list.push(new Element(8, value.name, value.number));
                  });

The problem is that the flatmap seems to be passing in elements of the array one by one to the subscribe function synchronously (tried using a set timeout before the http call which only ran after the subscribe). Therefore it is a sort of a loop of 28000 elements which hangs the UI thread. How could we trigger subscribe on an interval basis so that the UI thread can get some time during the processing of the list elements. (Essentially pseudo async recursion).

EDIT : Updated code with Meir's answer

Here is the code that I have currently, additionally I believe map is the wrong operation since it outputs the number of inputs it takes in. So correct me if I am wrong it takes in one http response and outputs one array, and therefore this array is processed as a whole by the rest of the steps. Additionally I have provided the sample list.json.

this.http.get("http://localhost:8100/list.json")
                .map((res) => {
                  console.log(res.json().list);
                  return res.json().list
                })
                .delayWhen((v) => Observable.timer(50))
                .buffer(Observable.timer(50, 50))
                .subscribe((entry) => {
                  console.log("CAME HERE AA " + entry);
                });

LIST JSON, there are more entries but I just kept it at two here

{ "list" : [
  {
    "name" : "test",
    "number" : "that",
    "verificationId" : 78
  },
  {
    "name" : "test",
    "number" : "that",
    "verificationId" : 78
  },
  {
    "name" : "test",
    "number" : "that",
    "verificationId" : 78
  },
  {
    "name" : "test",
    "number" : "that",
    "verificationId" : 78
  }]
}

Why do you use flatMap and not simply map?

Meir
– Meir

2016-10-26 17:50:20 +00:00
Commented Oct 26, 2016 at 17:50 — Meir
– Meir, Commented Oct 26, 2016 at 17:50

Meir · Accepted Answer · 2016-10-26 17:47:50Z

1

You can chunk it either by chunk size or time, for time chunks use:

source.buffer(Rx.Observable.timer(250, 250))
   .subscribe(chunk => {
     console.log('chunk ', chunk);
     list1.splice(list1.length, 0, ...chunk);
});

A working jsbin sample with both cases.

answered Oct 26, 2016 at 17:47

Meir

14.4k4 gold badges44 silver badges49 bronze badges

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

8 Comments

MilindaD Over a year ago

Almost there, just stuck with one more thing. When using it with a http call how do I process the response, convert it to a json array and pass it on to delayWhen for chunking. I tried simply prepending the "this.http.get("localhost:8100/list.son") .map((res) => res.json())" to your example but subscribe was not even then reached

Meir Over a year ago

Can you post the full code? I suspect your http call has no subscription at its end so it stays cold. In general: this.http.get(...).map(...).subscribe(...)

MilindaD Over a year ago

Updated the main question with the code sample. Here the subscribe is reached (I can't remember the one where it was cold since I was changing it a lot), however entry is null and nothing is printed in console.log

Meir Over a year ago

Why do you need the flatMap?

MilindaD Over a year ago

Used flatmap so that subscribe was called per the number of elements in the array returned by the json, so without looping I can process the array, so when there were 200 elements subscribe would be called 200 times. Though the problem was that was synchronous. Also did you have a look at the second edit sample (which does not use flatMap) which is what I created after your answer.

|

Collectives™ on Stack Overflow

RxJS asynchronous loop

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related