각도 2+ Observable 및 GroupBy

Question

구성원 (열 : 이름, 성, 섹션)이 포함 된 json 파일이 있습니다. 나는 그것을 읽고 그것을 * ngFor에서 사용할 수 있습니다 :

members: Observable<Member[]>; 

constructor(private _memberService: MemberService) { } 

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

이제 차트를 사용하고 싶습니다. 그러나 나는 관찰 할 수있는 범위에 도달하고 그룹화 할 수있는 방법을 알 수 없다. 예를 들어, 섹션별로 멤버를 그룹화하고 그 값을 차트에 사용하려고합니다. 어떤 도움이 필요합니까?

편집 :

내 서비스 :

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

나의 등급 :

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; 
} 

무엇 차트 기대된다

는

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

Answer 1

난 당신에 대해 혼란스러워 이해할 수있다 Observables,하지만 요 UR 질문은 다소 잘못된 방향으로 향하고있다.

클래스의 회원 속성은 Observable Member Array (오른쪽) (Observable)입니까? 나는 당신이 Observables를 다루는 것을 기대하지 않고 오히려 배열 (그리고 객체와 중첩 된 배열 등)을 사용하고있는 차트 라이브러리가 무엇이든 확실합니다.

그래서, 귀하의 경우 첫 번째 호출 포트는 멤버 배열의 인스턴스를 관찰 가능 상태에서 벗어나는 것입니다. 그런 다음 정상적인 일상적인 자바 스크립트 배열이 있으면 일반 자바 스크립트를 사용하여 해당 배열을 차트 라이브러리에서 사용하는 형식으로 마사지합니다.

그래서, 당신은 차트에 데이터를 전달해야 할 점, 당신은 회원의 배열을 가지고 차트가 소모 어떤 형식으로 변환하는 로직을 구현해야

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

에서. (나는 메서드 이름을 우스꽝스럽게 생각하고 있지만 바라기를 원한다면 내 요점을 얻는다.)

매핑을 수행하는 방법을 알아 내는데 어려움이있는 경우 멤버 배열 및 예상 차트 데이터의 샘플을 제공 할 수 있으며 해당 매핑에 대한 도움을받을 수는 있지만 실제로는 그렇지 않습니다. Observables 그 자체에 관한 질문.

편집 :

당신이 당신의 차트를 원하지만, 예상 데이터가 꽤 똑바로 앞으로 무엇인지에 대한 단서.

의 당신이 모든 사람의 전체 이름과 섹션의 차트를 원하는 가정 해 봅시다 : 당신은 이미

을 회원 [] 모든 데이터. 다음 차트 객체에 속성으로 그 pieChartLabels 및 pieChartData의 변수를 전달

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); 
}); 

: 그것은 위의 구독 함수 내에서 이런 일을 할 매우 간단합니다, 그래서 당신의 라벨 및 차트 데이터는 배열입니다.