access to the dictionaries sub-element typescript

Question

export class ProvinciaComponent extends CatalogoGenerico implements OnInit, 
    AfterViewInit {
       page: Page = new Page({sort: {field: 'descripcion', dir: 'asc'}});
       dataSource: ProvinciaDataSource;
       columns = ['codprovincia', 'codprovinciasc', 'descripcion', 'pais.codpais','pais.descripcion'];
       labelColumns = {
          'codprovincia': {'label': 'Código', 'width': '60', 'align': '', 'format': ''},
          'codprovinciasc': {'label': 'Código INEC', 'width': '60', 'align': '', 'format': ''},
          'descripcion': {'label': 'Descripción', 'width': '60', 'align': '', 'format': ''},
          'pais.codpais': {'label': 'Cod. Pais', 'width': '60', 'align': '', 'format': ''},
          'pais.descripcion': {'label': 'Pais', 'width': '60', 'align': '', 'format': ''}
    };
    headerColumns = this.columns.concat(['actions']);
    displayedColumns = this.headerColumns;
}

and my template

<mat-table [dataSource]="dataSource" matSort matSortActive="descripcion" matSortDirection="asc"
                 matSortDisableClear>
        <ng-container [cdkColumnDef]="column" *ngFor="let column of columns">
          <mat-header-cell *matHeaderCellDef mat-sort-header>{{labelColumns[column].label}}</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element[column]}} </mat-cell>
        </ng-container>
        <!-- Column Definition: actions -->
        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef>Acciones</mat-header-cell>
          <mat-cell *matCellDef="let row; let i=index;">
            <div class="actions">
              <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Open basic menu"
                      [disabled]="!permiso.is_edit && !permiso.is_remove">
                <mat-icon>more_vert</mat-icon>
              </button>
              <mat-menu #menu="matMenu">
                <button mat-menu-item (click)="openPopUp(row, row.idprovincia)"
                        *ngIf="permiso.is_edit">
                  <mat-icon>edit</mat-icon>
                  <span>Editar</span>
                </button>
                <button mat-menu-item (click)="eliminarProvincia(row)"
                        *ngIf="permiso.is_remove">
                  <mat-icon>delete</mat-icon>
                  <span>Eliminar</span>
                </button>
              </mat-menu>
            </div>
          </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns;"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

      </mat-table>

The structure of the information is as follows

I want to access lols attributes of the country object, that is if I want to access row ['country'], I get the country object, but I want to access an attribute of the object, ie row ['pais.codpais'], some idea of how to do this, consider the form in which the list is ready information in the template, since I define the keys in an array within the component

columns = ['codprovince', 'codprovinciasc', 'description', 'pais.codpais', 'pais.descripcion'];

Answer 1

In javascript you don't have to access properties strictly using [] (brackets), you can access directly like results.pais , and to access its properties just continue in that way like results.pais.codpais or results["pais"]["codpais"] and so on...

The only use case when you end up using brackets is when you have to access properties dinamicaly like:

var property = "codpais"

console.log(results.pais[property])

If you need to iterate the object using "deepObject.deepProperty" from object ( object.deepObject.deepProperty ), you can split the string in the dots and do something like this:

 function iterateObject(object, key) {
   var property = key
   var properties = key.split('.')

   if (!!properties && properties.length  0) {
     property = properties[0]

     // Check if there's not an empty string in cases like `property.`
     if (!!properties[1]) {
       const nextProperties = key.replace(property, '')

       return iterateObject(object[property], nextProperties)
     }

     return object[property]
   }

   return object[property]
 }

Or if you can do ES6, here's a simple one liner:

function iterateObject(object, key) { 
  return key.split('.').reduce((r, p) => (r[p] || r), object)
}

And use it like:

 iterateObject(results, 'pais.codpais')