javascript - Angular : Filter object data to build a Highchart Widget with distinct elements attributes -

i loading json data webservice , i'm injecting received data list component ,

like following :

import {component, oninit} '@angular/core'; import 'rxjs/add/operator/map' import {httpservice} '../http.service';  import * $ 'jquery'; import * highcharts 'highcharts';  @component({   selector: 'app-list',   templateurl: './list.component.html',   styleurls: ['./list.component.css'],   providers: [httpservice] })  export class listcomponent implements oninit {    dataitems: any;   nb = 0;   private dataurl = 'http://localhost:3000/list';  // url web api   constructor(private dataserver: httpservice ) {}   ngoninit() {     this.dataserver.loaddataitems(this.dataurl).subscribe(       data => {         this.dataitems = data;         console.log(this.dataitems);         (let = 0 ; < this.dataitems.length ; i++) {           // console.log(this.dataitems[i].g);           if (this.dataitems[i].browser === 'firefox') {             this.nbfirefox++           }           if (this.dataitems[i].browser === 'chrome') {             this.nbchrome++           }         }         console.log(this.nbfirefox);  //print firefox occurences         console.log(this.nbchrome);  //print chrome occurences          ...  // highchart widget build :           highcharts.chart('systemschart', {           chart: {             plotbackgroundcolor: null,             plotborderwidth: null,             plotshadow: false,             type: 'pie'           },           title: {             text: this.nb           },           tooltip: {             pointformat: '{series.name}: <b>{point.percentage:.1f}%</b>'           },           plotoptions: {             pie: {               allowpointselect: true,               cursor: 'pointer',               datalabels: {                 enabled: false               },               showinlegend: true             }           },           series: [{             name: 'brands',             colorbypoint: true,             data: [{               name: 'microsoft internet explorer',               y: 56.33             }, {               name: 'chrome',               y: 24.03,               sliced: true,               selected: true             }, {               name: 'firefox',               y: 10.38             }, {               name: 'safari',               y: 4.77             }, {               name: 'opera',               y: 0.91             }, {               name: 'proprietary or undetectable',               y: 0.2             }]           }]         });       }     );   } } 

as can see in data , this.dataitems.browser refers several navigators , won't list manually , want filter dynamically each browser occurence , , build highchart widget , there i'm used add every dimension value

the static manner (bad) :

series: [{             name: 'brands',             colorbypoint: true,             data: [{               name: 'microsoft internet explorer',               y: 56.33             }, {               name: 'chrome',               y: 24.03,               sliced: true,               selected: true             }, {               name: 'firefox',               y: 10.38             }, {               name: 'safari',               y: 4.77             }, {               name: 'opera',               y: 0.91             }, {               name: 'proprietary or undetectable',               y: 0.2             }]           }] 

my purpose filter data , build chart dynmaically without enterning each browser type , since don't know complete list

any ideas ??

it sounds need build list of of browsers dynamically response this:

browsers: {[key:string]:number} = {}; this.dataserver.loaddataitems(this.dataurl).subscribe(   data => {     this.dataitems = data;     console.log(this.dataitems);     this.dataitems.foreach(item => {         if (this.browsers[item.browser]) {            this.browsers[item.browser] += 1;         } else {            this.browsers[item.browser] = 1;         }     });   } }); 

you'll have object browser names keys , number of occurrences value. can iterate on key, value pairs build data series chart.