0

I am using c3.js to display a chart which has parts differentiated by location. On click of a part, i take the location from it and filter my master data. Then i require to display a table below showing the filtered records.

Portion of my code is below:

 resultData;
 filteredData;
  constructor(private appService: AppService) { }

  ngOnInit(){

    this.apiService.getData('/reportees').subscribe((res)=>{
      this.resultData=JSON.parse(res._body);
      let value=JSON.parse(JSON.stringify(this.resultData));
      this.chart = c3.generate({
        data: {
            onclick:function(d,element){
              this.filteredData=value.filter((record)=>record.location==d.id);
              console.log(this.filteredData);
            }

When i do a onclick,I could see filteredData getting logged on browser console. But in table, i don't see the rows getting populated. What is known is filteredData is undefined on page load due to which rows are not getting populated. In such case, please help in display of the records in table on click of region dynamically.

Gayathri
  • 1,776
  • 5
  • 23
  • 50

1 Answers1

0

You might want to check if you are using async pipe or a safe navigation operator when trying to display it in the table.

For example,

{{filteredData?.something}} or

{{filteredData.something | async}}

Nishu Goel
  • 11
  • 4
  • Not so, resultData is the one which comes on subscription and it happens on load itself. Later on, clone of resultData is taken and filtered and passed to filteredData only on a onclick trigger. Since html is loaded once, i think view doesn't change then. – Gayathri Dec 18 '19 at 08:32
  • Can you create a stackblitz of the same? – Nishu Goel Dec 18 '19 at 08:34