ability to reach the sub-element dictionaries in typescript

Question

ability to reach the sub-element dictionaries in typescript

class ProvinciaComponent extends CatalogoGenerico implements OnInit, 
    AfterViewInit {
       page: Page = new Page({sort: {field: 'description', dir: 'asc'}});
       dataSource: ProvinciaDataSource;
       columns = ['codprovince', 'codprovinciasc', 'description', 'country.codcountry','country.description'];
       labelColumns = {
          'codprovince': {'label': 'Code', 'width': '60', 'align': '', 'format': ''},
          'codprovinciasc': {'label': 'INEC Code', 'width': '60', 'align': '', 'format': ''},
          'description': {'label': 'Description', 'width': '60', 'align': '', 'format': ''},
          'country.codcountry': {'label': 'Country Code', 'width': '60', 'align': '', 'format': ''},
          'country.description': {'label': 'Country', 'width': '60', 'align': '', 'format': ''}
    };
    headerColumns = this.columns.concat(['actions']);
    displayedColumns = this.headerColumns;
}

and the template used is as follows:

<mat-table [dataSource]="dataSource" matSort matSortActive="description" 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>Actions</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>Edit</span>
                </button>
                <button mat-menu-item (click)="eliminarProvincia(row)"
                        *ngIf="permiso.is_remove">
                  <mat-icon>delete</mat-icon>
                  <span>Delete</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 diagram displaying the data structure can be viewed here:

https://i.stack.imgur.com/pWHHo.png

In order to access specific attributes of the country object in the row data, such as 'country.codcountry', you may need a different approach considering how the keys are defined within the component's array. Hope that helps.

columns = ['codprovince', 'codprovinciasc', 'description', 'country.codcountry', 'country.description'];

javascript angular typescript

Answer 1

Answer №1

In JavaScript, you have the flexibility to access properties directly without always using brackets ([]). For example, you can access results.pais, and then proceed to access its nested properties like results.pais.codpais or results["pais"]["codpais"].

The main scenario where using brackets becomes necessary is when accessing properties dynamically, as shown below:

var property = "codpais"

console.log(results.pais[property])

If you need to recursively iterate through an object using a string representation like "deepObject.deepProperty" starting from object (object.deepObject.deepProperty), you can split the string by dots and implement a function like this:

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

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

    // Handle cases with empty strings like `property.`
    if (!!properties[1]) {
      const nextProperties = key.replace(property, '')

      return iterateObject(object[property], nextProperties)
    }

    return object[property]
  }

  return object[property]
}

Alternatively, for ES6 users, here's a concise one-liner solution:

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

You can utilize it like this:

iterateObject(results, 'pais.codpais')

Answer 2

In JavaScript, you have the flexibility to access properties directly without always using brackets ([]). For example, you can access results.pais, and then proceed to access its nested properties like results.pais.codpais or results["pais"]["codpais"].

The main scenario where using brackets becomes necessary is when accessing properties dynamically, as shown below:

var property = "codpais"

console.log(results.pais[property])

If you need to recursively iterate through an object using a string representation like "deepObject.deepProperty" starting from object (object.deepObject.deepProperty), you can split the string by dots and implement a function like this:

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

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

    // Handle cases with empty strings like `property.`
    if (!!properties[1]) {
      const nextProperties = key.replace(property, '')

      return iterateObject(object[property], nextProperties)
    }

    return object[property]
  }

  return object[property]
}

Alternatively, for ES6 users, here's a concise one-liner solution:

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

You can utilize it like this:

iterateObject(results, 'pais.codpais')

ability to reach the sub-element dictionaries in typescript

Answer №1

Similar questions

A small computation

What is the best way to detect and handle the destroy event in Kendo UI grids when a click event

Encounter an Internal Server Error while using Laravel 5.4

Switch the cursor to display the magnifying glass icon for zooming in and out

When you try to upload an image using php/ajax, it causes the page to refresh

How can it be that "Function" actually functions as a function?

Angular and Bootstrap do not support margin styles

Retrieve the current URL upon page load

delay in displaying options when toggling visibility in a dropdown menu

The functionality of data binding becomes unclear when the ngif directive is applied to a mat-selection-list in

Angular: Do Modules or Components Represent Pages in an Application?

Is it necessary for me to be concerned with clearing out sizable objects in Node.js, or should I trust the garbage collector to handle

Customizing modal window HTML in ng-bootstrapNeed to override the default modal window

Elevating the Material Design Lite Progress bar using ReactJS

Stopping npm build when ESLint detects warnings

Numerals for Central Leaflet Marker

Count up with style using the "jQuery Boilerplate" plugin for Jquery!

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

Obtain the count of unique key-value pairs represented in an object

Utilizing JavaScript, HTML, and CSS to incorporate images within circular frames