Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi All,

Am new into Angular and am trying to load a dropdown with static values (values defined in a .ts file).
While am trying to load the array with the values, am getting error msg as:

Cannot read property 'correlationDepthUnits' of undefined

Am providing the whole code below:

What I have tried:

Constant.ts
export class Constant {
public static Units = [
        {unit_name : "ft", unit_value : "ft", unit_description : "Feet"},
        {unit_name : "m", unit_value : "m", unit_description : "Meters"},
        {unit_name : "km", unit_value : "km", unit_description : "Kilometers"},
        {unit_name : "yd", unit_value : "yd", unit_description : "Yards"},
        {unit_name : "mi", unit_value : "mi", unit_description : "Miles"},
    ]
}

units.ts
export class units{
    unit_name : string;
    unit_value : string;
    unit_description : string;
}

main-page.Component.ts
import { Component, OnInit } from '@angular/core';
import { units } from '../../models/units';
import { Constant } from '../../Constant';

@Component({
  selector: 'app-well-data',
  templateUrl: './well-data.component.html',
  styleUrls: ['./well-data.component.css']
})
export class WellDataComponent implements OnInit {
  Units : units[] = [];

  constructor() {}

  ngOnInit(): void {
    this.getUnits();
  }

  getUnits() {
    debugger;
    /*
    for (var index = 0; index < Constant.Units.length; index++)
    {
      this.Units[index].unit_name = Constant.Units[index].unit_name;
      this.Units[index].unit_value = Constant.Units[index].unit_value;
      this.Units[index].unit_description = Constant.Units[index].unit_description;
    }
    */

    Constant.Units.forEach(function(item){
      this.Units.push(item);
    });
  }

}



Please help me thorugh this.
Thanks.
Posted
Updated 31-Aug-20 19:59pm

1 solution

‘Undefined’ is the property of the global object. If you don’t assign any value to a variable is of type ‘undefined’. A code also return the undefined value when the evaluated variable doesn’t have any assigned value.

Example:
JavaScript
function test(t) {      //defining a function
  if (t === undefined) {       //if t=undefined, call tt
        console.log(t.tt)      //call tt member from t
  }
  return t;    
}var a;    //a is a variable with undefined valueconsole.log(test(a)); //function call


You need to make sure that which ever variables throws undefined error, has an assigned value.
JavaScript
function test(t) {      //defining a function
  if (t === undefined) {       //if t=undefined, call tt
        console.log(t)      //call t
  }
  return t;    
}var a=10;    //a is a variable with undefined valueconsole.log(test(a)); //function call


Now, in your case, issue seems to be with:
JavaScript
Constant.Units.forEach(function(item){
  this.Units.push(item);
});

You are missing arrow in the call syntax. try:
JavaScript
Constant.Units.forEach((item) => {
  this.Units.push(item);
});

For more details on it: JavaScript Function Definitions[^]
Quote:
Arrow functions do not have their own this. They are not well suited for defining object methods.
 
Share this answer
 
Comments
Member 11072126 1-Sep-20 3:26am    
Thanks. It worked. Understood why arrow function was required.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900