Angular2 RxJS - Creating an observable for bullying

Question

I have a mock file containing a set of Jobs, each of which has a set date. Currently (below) I am creating a simple observation that, when subscribed, returns a collection of mocking tasks. What I cannot understand is how I can process a flat array of Tasks to group them by their date, returning a structure such as:

// Current data structure (unstructured) [{due: "2016-01-01"}, {due: "2016-01-01"}, {due: "2016-01-02"}, ...] // Desired structure for consumption { "2016-01-01": [{...}, {...}], "2016-01-02": [{...}, {...}, {...}], "2016-01-03": [{...}] } 

My current observed creation code is as follows:

 // Service... tasks: Observable<Task[]>; // init() called from the constructor private init() { this.tasks = Observable.create(observer => { observer.next(mockTasks); }); } getTasks() { return this.tasks; } 

What is consumed in my component as follows:

 // Component... ngOnInit() { this.taskService.getTasks().subscribe(tasks => { this.tasks = tasks; // Contains the collection of tasks as expected }); } 

This works fine - I am returning my entire array of tasks as expected. I tried using the groupBy operator to achieve the above, but the observable created using Observable.create() does not seem to have this method. I already paid attention to this resource to try to achieve this, and I noticed that Observable.from() used instead of .create() , however this also does not seem to be an accessible function in my service.

• Does the RxJS operator (for example, groupBy ) use the data formatting method as described above (and how can this be achieved)? Or should it be formatted manually?
• Regarding the answer to 1 - where is this supposed to happen?

Thanks!

Answer 1

You mix a few things, I think. Observers always have factor time in them, so you do something with the help of what is observed over time. If you want to group things in a static array, then observables are the wrong approach.

In your case, you have several dats

 const tasks = [ {due: "2016-01-01"} , {due: "2016-01-01"} , {due: "2016-01-02"} ]; 

If you are going to put them in an Observable, it is possible, but it will simply output the array once and that is it.

 const observable = Rx.Observable.of(tasks); observable.subscribe(x => console.log('All at once', x)); // output: All at once [ {due: "2016-01-01"}, {due: "2016-01-01"}, {due: "2016-01-02"} ]; 

If you want to spread them in time - and now we are approaching what we observe for you, you can also do this

 const observable2 = Rx.Observable.from(tasks); observable2.subscribe(x => console.log('One after the other', x)); // output: 'One after the other' {due: "2016-01-01"} // 'One after the other' {due: "2016-01-01"} // 'One after the other' {due: "2016-01-02"} 

Now suppose we have a data source that provides a new task from time to time, and we want to group them over time. Here's what it looks like:

 const observable3 = Rx.Observable.from(tasks); observable3 .scan((acc, obj) => { let oldValue = acc[obj.due] || 0; acc[obj.due] = ++oldValue; return acc; }, {}) .subscribe(x => console.log(x)); // output: { 2016-01-01: 1 } // { 2016-01-01: 2 } // { 2016-01-01: 2, 2016-01-02: 1 } 

So, depending on your needs. Observations may be correct. If the data is distributed over time, it is possible to group them as shown above. I uploaded the code to jsbin to play with it.