Cannot read property 'map' of undefined using D3 Bar Chart in Angular 7

Question

Cannot read property 'map' of undefined when i map the totalStores object.

I have parsed the existing JSON data into two variables store and storeCount, store object for X-Axis and storeCount for Y-Axis

ngOnInit() {
    this.DashboardService.getActiveProjectsStatusByDimension(
      this.statusIndex,
      this.dimension
    ).subscribe(res => {
      this.res = res;
      this.projectSelectedDimension = JSON.parse(JSON.stringify(res));

      this.totalStores = Array();

      var storeCountIndex = 2;

      for (let k = 0; k < this.projectSelectedDimension.data.length; k++) {
        let obj = this.projectSelectedDimension.data[k];
        let xAxis = Object.keys(obj)[0];
        let yAxis = obj[Object.keys(obj)[0]][storeCountIndex];
        // console.log("x:", xAxis);
        // console.log("y:", yAxis);
        let objBarChart = { store: xAxis, storeCount: yAxis };
        this.totalStores.push(objBarChart);
      }

    });

    this.initAxis();
  }


private initAxis() {
    this.x = d3Scale
      .scaleBand()
      .rangeRound([0, this.width])
      .padding(0.1);
    this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
    this.x.domain(this.totalStores.map(d => d.store));
    this.y.domain([
      0,
      d3Array.max(this.totalStores, this.totalStores.map(d => d.storeCount))   // erroe saying valueof is not a function
    ]);
  }

Duplicate of: https://stackoverflow.com/questions/56373225/angular-7-error-type-error-cannot-read-property-map-of-undefined/56374388#56374388 — Robert, Jun 04 '19 at 09:10
I think `totalStores` is `undefined` because it is initialized (through ` this.totalStores = Array();`) only when `subscribe` callback is executed: `initAxis` is invoked immediatly after `subscribe` invocation... try to invoke `initAxis` at the end of subscribtion body, e.g. after the `for` loop... — Pietro Martinelli, Jun 04 '19 at 09:10
Possible duplicate of [what is .subscribe in angular?](https://stackoverflow.com/questions/44921788/what-is-subscribe-in-angular) — wentjun, Jun 04 '19 at 09:37

score 0 · Accepted Answer · answered Jun 04 '19 at 09:10

The code inside the .subscribe() function runs AFTER the getActiveProjectsStatusByDimension() function returns. So you are trying to map over an undefined object. To solve this, simply put your initAxis() function inside the subscribe block.

ngOnInit() {
    this.DashboardService.getActiveProjectsStatusByDimension(
      this.statusIndex,
      this.dimension
    ).subscribe(res => {
      this.res = res;
      this.projectSelectedDimension = JSON.parse(JSON.stringify(res));

      this.totalStores = Array();

      var storeCountIndex = 2;

      for (let k = 0; k < this.projectSelectedDimension.data.length; k++) {
        let obj = this.projectSelectedDimension.data[k];
        let xAxis = Object.keys(obj)[0];
        let yAxis = obj[Object.keys(obj)[0]][storeCountIndex];
        // console.log("x:", xAxis);
        // console.log("y:", yAxis);
        let objBarChart = { store: xAxis, storeCount: yAxis };
        this.totalStores.push(objBarChart);
      }
      this.initAxis() //put it here
    });

//    this.initAxis();
  }

Hi @dijolf, map of undefined error is gone, now facing the error saying " valueof is not a function" in initAxis() function, check the updated code with comment where the error is coming — Curious-Developer, Jun 04 '19 at 10:45

Cannot read property 'map' of undefined using D3 Bar Chart in Angular 7

1 Answers1