CODEWITHSUNDEEP
angulartypescriptcharts
Crypto
Crypto

Reputation: 157

Angular 2+ Observable and GroupBy

I have a json file that includes members (columns: name, lastname, section). I can read it like that and use it in *ngFor:

 members: Observable<Member[]>;

 constructor(private _memberService: MemberService) { }

 ngOnInit() {
     this.members = this._memberService.getMembers();
 }

Now i want to use a chart. But i can't figure out how i can reach and group by an observable. For example i want to group members by sections and use that values in chart. Any help?

Edit:

My Service:

  getMembers(){
    return this._http.get(URL_MEMBERS)
    .map((response: Response) => response.json());
  }

My Class:

export class Member {
  section: number;
  number: number;
  firstName: string;
  lastName: string;
  status: string;
  yearOfSep: number;
  yearBook: number;
  class: string;  
  lastPosition: string;
  city: string;
  info: string;
}

What chart is expecting:

  public pieChartLabels: string[] = ['X', 'Y', 'Z'];
  public pieChartData: number[] = [300, 500, 100];
  public pieChartType: string = 'pie';

Upvotes: 0

Views: 1004

Answers (1)

snorkpete
snorkpete

Reputation: 14564

I can understand you're confused about Observables, but your question is somewhat heading in the wrong direction.

Your member property on your class is an Observable of Member arrays, right (Observable)? I'm pretty sure whatever charting library you're using doesn't expect to deal with Observables, but rather arrays (and objects and nested arrays etc).

So, in your case, your first port of call is to get an instance of your Member array out of your observable. Once you have that normal, everyday Javascript array, you then use normal javascript to massage that array into the format that your charting library uses.

So, at the point where you need to pass your data to your chart,

 let chartData;
 this.members.subscribe(memberArray => {
   chartData = this.massageMemberArrayIntoChartDataFormat(memberData);
 });

where you have to implement that logic to take your array of Members and convert it to whatever format your chart consumes. (I'm being ridiculous with the method name, but hopefully you get my point).

If you're having trouble figuring out how to do that mapping, you can provide samples of what your member array and the expected chart data looks like and you can probably get help with that mapping, but this really isn't a question about Observables per se.

EDIT:

No clue about what you want on your chart, but the expected data is pretty straight forward.

Let's say you want a chart of every person's full name and section:

You already have a Members[] with all your data. Your labels and chart data are also arrays so it's pretty straightforward to do something like this within your subscribe function above:

this.members.subscribe(memberArray => {

 // map the member objects in my array to a combined firstname and lastname string
 pieChartLabels = memberArray.map(m => m.firstName + ' ' + m.lastName);

 // map the member objects to their section numbers
 pieChartData = memberArray.map(m => m.section);
});

then pass those pieChartLabels and pieChartData variables as properties to your chart object.

Upvotes: 1

Related Questions