Return undefined from existing property in javascript model

Question

I have a well-defined model, written this way:

export class Navigation {
  line: {
    _id: string;
    code: string;
    name: string;
    isVia: boolean;
    _operator: {
      _id: string;
      name: string;
    };
    via: {
      _id: string;
      name: string;
    }
  };
  hour: string;
  destiny: string;
}

On a certain page I'm starting in a variable before the constructor and I do so:

public navigation: Navigation = new Navigation ();

Below in the constructor I am doing so:

this.navigation.destiny = 'center';
this.navigation.line.isVia = false;
this.navigation.line.via.name = 'No path to this line';

I can access the hour anddestiny properties however the property for example line does not work. On my console is giving the following error:

ERROR Error: Uncaught (in promise): TypeError: Can not set property 'isVia' of undefined TypeError: Can not set property 'isVia' of undefined

I need to use the model data.

What can be and how to arrange?

ATTEMPTS

1. public navigation: Navigation = {};
2. public navigation: Navigation = new Navigation;
3. public navigation: Navigation; and in the this.navigation = Navigation () constructor;

Both of these occur the same error.

SCENARIO

I'm developing in ionic 2 basically it works withangular 4 and uses typescript as a language. When I create a page in 'ionic 4' it generates files in (.html,.ts, .scss,.modeule.ts) the .ts file controls my pages, in it I can manipulate easily all my html, making requests to the server and changing on the screen at runtime easily. For a better development I use the idea of ​​models to standardize my content both receiving and receiving when shipping, based on this everything I receive / sending has the formulation of amodel. The model is a separate file, in case mine is expressed in its total form (ie every file) in my .ts of my page I am instantiating this my model, saying that mynavigation variable will take the form of my template Navigation shortly after my constructor having added a value, for as I informed you about using it in my html. At this moment I am trying the error which I express in this question.

In order to reproduce the error it is necessary to use a complex model, that is to say that it has objects object, it can be observed in mine that I have values ​​in the root (destiny,hour) and a line object inside this object I have others, I can not access this object from line and nothing that has inside it.

Answer 1

Your model is not initialized. Change your model to this:

export class Navigation {
  line:any= {
        _id: undefined,
        code: undefined,
        name: undefined,
        isVia: undefined,
        _operator: {
          _id: undefined,
          name: undefined,
        },
        via: {
          _id: undefined,
          name: undefined,
       }
  };
  hour: undefined;
  destiny: undefined;
}

Answer 2

since line is an object , it is undefined when u construct Navigation ,you have to initialize it like that then put the value in isVia :

this.navigation.destiny = 'center';
this.navigation.line = {}; 
this.navigation.line.isVia = false;
this.navigation.line.via = {}; 
this.navigation.line.via.name = 'No path to this line';

Hope it helps

Answer 3

You should assign line property first in defining class if you want to set any line property. Initially after new Navigation() line property is undefined. So you have to set something initially on it. And after it you can use props of line

export class Navigation {
  line: {
    _id: string;
    code: string;
    name: string;
    isVia: boolean;
    _operator: {
      _id: string;
      name: string;
    };
    via: {
     _id: string;
     name: string;
    }
  } = {via: {}, _operator: {}};
  hour: string;
  destiny: string;
}

or

var nav = new Navigation();
nav.line = {isVia = false, via: {...}};