Grouping Obersavable data with Angular 2

Question

I have a stream of observable data that is similar to this: -

 [
    {
    "WorkId": 1539,
    "Name": Exam 1,
    "AssessmentTypeId" : 2345,
    "AssessmentTypeDescription" : "Exam"
    ...
    },
    {
    "WorkId": 1540,
    "Name": Exam 2,
    "AssessmentTypeId" : 2345,
    "AssessmentTypeDescription" : "Exam"
    ...
    },
    {
    "WorkId": 1541,
    "Name": Coursework,
    "AssessmentTypeId" : 2346,
    "AssessmentTypeDescription" : "Coursework"
     ...
     }
   ]

Each object is an known as an element. What I want to do is display the element data in html tables grouped by the AssessmentTypeId. E.g.

Exam

WorkId Name

1539 Exam 1

1540 Exam 2

Coursework

WorkId Name

1541 Coursework 1

I am fairly new to working with observables and I am little unsure about how to go about this? I am guessing I need to look at using the .groupBy transformation?

Thank you.

groupBy() operator? Not necessarily. What exactly is being emitted in your stream: a SINGLE ARRAY of all objects or INDIVIDUAL OBJECTS, one by one? — AngularChef, Feb 15 '17 at 14:35
From the stream I am getting a single array of all the objects. — Andy B, Feb 16 '17 at 00:20

score 0 · Answer 1 · answered Feb 15 '17 at 15:46

You can push them into an object with arrays, then use that to create the tables:

var idTracker = {};

//Stream is array of objects from your observable
stream.map(obj => idTracker[obj.AssesmentTypeId] ? idTracker[obj.AssesmentTypeId].push(obj) : idTracker[obj.AssesmentTypeId] = [obj]);

Now idTracker will have keys that are your AssesmentTypeId that link to an array of all objects in the stream that have that id. You can then dynamically create the tables using that.

Note that you would declare idTracker at the component scope, then call the stream map (where stream is the resultant data from the subscribe) inside the body of the observable callback.

Grouping Obersavable data with Angular 2

1 Answers1