Retrieve values from a multi-level nested object by using square bracket notation for each level

Question

Retrieve values from a multi-level nested object by using square bracket notation for each level

I am in need of a config object to display nested data. Check out the demo code for reference

In the code, accessing "customer.something" is essential. There can be multiple levels of nesting, which the grid handles with field='customer.something'. How can I achieve the same using my template?

<e-column field='customer.something' headerText='Other' editType='dropdownedit' [edit]='editParams' width=120>

Below is the HTML file containing the template:

<ejs-grid #Grid [dataSource]='data' allowSorting='true'>
    <e-columns>
        <ng-template #colTemplate ngFor let-column [ngForOf]="colList">
            <e-column [field]='column.field' [headerText]='column.header' textAlign='Right' width=90>
                <ng-template #template let-data>
                    {{data[column.field] |  currency:'EUR'}} <-- looking to address this line
                </ng-template>
            </e-column>
        </ng-template>
    </e-columns>
</ejs-grid>

<!-- <ejs-grid #Grid [dataSource]='data' allowSorting='true'>
    <e-columns>
        <e-column field='price' isPrimaryKey='true' headerText='Price' textAlign='Right' width=90></e-column>
        <e-column field='customer.something' headerText='Other' editType='dropdownedit' [edit]='editParams' width=120>
        </e-column>
    </e-columns>
</ejs-grid> -->

javascript angular typescript ej2-syncfusion

Answer 1

Answer №1

One method to retrieve a specific field value using a string path is by utilizing a pipe. The following code demonstrates how this can be achieved:

@Pipe({name: 'fieldFromPath'})
export class FieldFromPathPipe implements PipeTransform {
  transform(data: Object, property: string): Object {
    property = property.replace(/\[(\w+)\]/g, '.$1');
    property = property.replace(/^\./, '');
    var a = property.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in data) {
            data = data[k];
        } else {
            return;
        }
    }
    return data;
  }
}

Then, in the template section, you can apply the pipe as shown below:

<ng-template #template let-data>
 {{data | fieldFromPath: column.field |  currency:'EUR'}}
</ng-template>

To view an example, you can visit this link: https://stackblitz.com/edit/angular-ej2syncfusion-angular-grid-jqm2kz

Note: The concept of extracting property values from a string path was inspired by a discussion on Stack Overflow. You can check it out here: Accessing nested JavaScript objects and arrays by string path

While this approach works, there may be alternative methods worth exploring for retrieving such values.

Answer 2

One method to retrieve a specific field value using a string path is by utilizing a pipe. The following code demonstrates how this can be achieved:

@Pipe({name: 'fieldFromPath'})
export class FieldFromPathPipe implements PipeTransform {
  transform(data: Object, property: string): Object {
    property = property.replace(/\[(\w+)\]/g, '.$1');
    property = property.replace(/^\./, '');
    var a = property.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in data) {
            data = data[k];
        } else {
            return;
        }
    }
    return data;
  }
}

Then, in the template section, you can apply the pipe as shown below:

<ng-template #template let-data>
 {{data | fieldFromPath: column.field |  currency:'EUR'}}
</ng-template>

To view an example, you can visit this link: https://stackblitz.com/edit/angular-ej2syncfusion-angular-grid-jqm2kz

Note: The concept of extracting property values from a string path was inspired by a discussion on Stack Overflow. You can check it out here: Accessing nested JavaScript objects and arrays by string path

While this approach works, there may be alternative methods worth exploring for retrieving such values.

Retrieve values from a multi-level nested object by using square bracket notation for each level

Answer №1

Similar questions

karma: Error: Unable to access the 'prototype' property of an undefined object

When attempting to send data to the ServiceStack RESTful service, an error message of 'Access is denied' was received

Techniques for manipulating multiple circles with JavaScript

Optimal method for retrieving data from a JSON object using the object's ID with a map

What is the recommended TypeScript type for the NextJS _app.tsx Component and pageProps?

What is the best way to obtain clear HTTP request data in a component?

Hide button for the last input form to dynamically remove in jQuery

Attempting to add an element to an array results in an endless cycle

Encountering a timeout error when connecting to MongoDB

Error: 'Target is not found' during React Joyride setup

An item was shown on the HTML page

The Vue.js transition feature seems to be malfunctioning when trying to display a modal

Determine the vertical dimension of an element through a JavaScript event listener

Guide on sending information from a parent component to a child component in Angular using an event system

Encountering the message "a critical error occurred: 'vips/vips8' file was not located" while using M2 (Apple Silicon) Macs

Ensure your Vue components have type-checked props at compile time when using TypeScript

Having trouble with VSCode/tsconfig path configurations, as the files are being fetched but still receiving a "Module not found" error in the editor

The function 'sendEmailVerification' is not a property of the type 'Promise<User>'

Ways to showcase an alert or popup when clicking?

Revising text for real-time editing