Determine the value from an object in the view by evaluating a string in dot notation

Question

Determine the value from an object in the view by evaluating a string in dot notation

Seeking assistance with a recurring issue I've encountered lately.

Imagine having two objects in AngularJS:

$scope.fields = ['info.name', 'info.category', 'rate.health']

$scope.rows = [{
    info: { name: "Apple", category: "Fruit"},
    rate: { health: 100, ignored: true}
},{
    info: { name: "Orange", category: "Fruit"},
    rate: { health: 100, ignored: true}
},{
    info: { name: "Snickers", category: "Sweet"},
    rate: { health: 0, ignored: true}
}]

I aim to display a table on a view that only exhibits the fields listed in $scope.fields. While flattening the table using JavaScript is an option, I'm curious if there's a method to achieve this by converting the dot notation into the path.

I have included a JSFiddle link to showcase the issue I am encountering:

JSFiddle: http://jsfiddle.net/7dyqw4ve/1/

I have also experimented with a suggested approach but utilizing functions in the view is not recommended: Convert JavaScript string in dot notation into an object reference

If you have any insights or solutions, your input would be highly valued. Thank you.

javascript angularjs

Answer 1

Answer №1

To utilize angular's built-in evaluator, you can access the $eval property on the scope (not to be confused with the vanilla eval) to evaluate any angular expression (rather than JavaScript as regular eval does). Angular uses this internally for evaluating expressions while handling bindings.

For example:

{{$eval(field, row)}}

You could also do:

<th ng-repeat="field in fields">{{$eval(field, row)}}</th>

Alternatively, you can encapsulate the logic within a controller and expose it through a method on the scope.

<th ng-repeat="field in fields">{{getValue(field, row)}}</th>

and

$scope.getValue = function(exp, row){
    return $scope.$eval(exp, row);
}

See Demo

You may also consider using the $parse service by injecting $parse.

$scope.getValue = function(exp, row){
    return $parse(exp)(row);
}

and

<th ng-repeat="field in fields">{{getValue(field, row)}}</th>

Check out the Demo

Answer 2

To utilize angular's built-in evaluator, you can access the $eval property on the scope (not to be confused with the vanilla eval) to evaluate any angular expression (rather than JavaScript as regular eval does). Angular uses this internally for evaluating expressions while handling bindings.

For example:

{{$eval(field, row)}}

You could also do:

<th ng-repeat="field in fields">{{$eval(field, row)}}</th>

Alternatively, you can encapsulate the logic within a controller and expose it through a method on the scope.

<th ng-repeat="field in fields">{{getValue(field, row)}}</th>

and

$scope.getValue = function(exp, row){
    return $scope.$eval(exp, row);
}

See Demo

You may also consider using the $parse service by injecting $parse.

$scope.getValue = function(exp, row){
    return $parse(exp)(row);
}

and

<th ng-repeat="field in fields">{{getValue(field, row)}}</th>

Check out the Demo

Answer 3

Answer №2

A slight modification of PSL's solution that also does the job:

<th ng-repeat="field in fields">{{$eval('row.'+field)}}</th>

The expression $eval('row.'+field) initially gives us row.info.name for fields[0], which then translates to Apple through the binding {{row.info.name}}.

Find it on JSFiddle: http://jsfiddle.net/tbmpls/xhon86p7/8/

This method is straightforward, easy to comprehend, I believe.

From what I can tell, the performance should be nearly identical to a direct {{row.info.name}} binding because generating the string should be very quick - but I am curious to hear any opinions on this matter.

(On another note, this approach also functions within an ng-repeat where your list is nested within an object like :

<span ng-repeat="val in $eval('myobj.'+myPathInDotNotation) track by $index">

though as with all things related to ng-repeat, it would be wise to verify the performance of this)

Answer 4

A slight modification of PSL's solution that also does the job:

<th ng-repeat="field in fields">{{$eval('row.'+field)}}</th>

The expression $eval('row.'+field) initially gives us row.info.name for fields[0], which then translates to Apple through the binding {{row.info.name}}.

Find it on JSFiddle: http://jsfiddle.net/tbmpls/xhon86p7/8/

This method is straightforward, easy to comprehend, I believe.

From what I can tell, the performance should be nearly identical to a direct {{row.info.name}} binding because generating the string should be very quick - but I am curious to hear any opinions on this matter.

(On another note, this approach also functions within an ng-repeat where your list is nested within an object like :

<span ng-repeat="val in $eval('myobj.'+myPathInDotNotation) track by $index">

though as with all things related to ng-repeat, it would be wise to verify the performance of this)

Determine the value from an object in the view by evaluating a string in dot notation

Answer №1

Answer №2

Similar questions

When using Restangular, the initial call will return an array while subsequent calls will return an object

Could not locate the provider: $stateProvider

JWT - Effective strategies for enhancing the user experience for a returning logged-in user

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of

Is it possible to utilize the expose method to retrieve additional reactive variables and computed properties similar to methods in Vue 3?

JavaScript DateTimePicker onChange event malfunctioning

Ways to create a rounded pane for Highchart's Solidgauge

Set onfocus for DOM elements dynamically

Deciphering the issue: "Error: ng:areq"

The function req.checkBody does not exist

Enhance your AngularJS skills by incorporating multiple conditions into the ternary operations of ng-class

Is there a way to transmit React code using Express?

Organize Javascript objects based on their dates - group them by day, month,

Unable to view image on Django and Angular platform

Retaining UI state across views in Ionic and AngularJS

Confusion arises from the code for processing an Ajax redirect

Utilize Material-UI's <Autocomplete /> feature to conduct searches using multiple parameters

Automatically select and pre-fill a list item based on its value using jQuery

The event listener for changing radio buttons

Can a robust web application be developed using Kotlin in Node.js?