Click here to Skip to main content
14,691,972 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 20: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:
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.
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:
Constant.Units.forEach(function(item){
  this.Units.push(item);
});

You are missing arrow in the call syntax. try:
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.
   
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