How dynamically get the value of a JSON variable in Angular?

Question

Hi I want to do some like this:

{{item.price.{{comparator}}}}

I mean, take a value from type of price using a {{comparator}} variable.

this is an example of my code (the data is bigger and I have more types of prices):

var items = [
  {"name":"Item1",price:{public:10,private:15,other1:16.3,other2:17.5}},
  {"name":"Item2",price:{public:20,private:45}},
]
  
var angularApp = angular.module('angularApp', [
    'angularAppControllers',
]);

var angularAppControllers = angular.module('angularAppControllers', []);


angularAppControllers.controller('ComparationCtrl', ['$scope',
    function ($scope) {
      $scope.comparator = "private";
      
      $scope.data = items;
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-App="angularApp">
<div ng-controller="ComparationCtrl">
  <select ng-model="comparator">
    <option value="public">Public</option>
    <option value="private">Private</option>
    <option value="other1">Other 1</option>
    <option value="other2">Other 2</option>
    <option value="othern">....</option>
  </select>
  {{comparator}}
  <br />
  <ul>
    <li ng-repeat="item in data">
        {{item.name}} - {{item.price.public}} - <strong>(item.price.{{comparator}})</strong>
    </li>
</ul>
</div>
</div>

ulybu · Accepted Answer · 2016-08-25 13:10:31Z

2

Hum, assuming item.price and comparator are defined in your $scope, try:

{{ item.price[comparator] }}

edited Aug 25, 2016 at 13:10

answered Aug 23, 2016 at 23:20

ulybu

655 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Skaparate · Accepted Answer · 2016-08-23 23:27:28Z

0

Like this: https://plnkr.co/edit/IrheJrHz8eOfb5LmTx7x

angular.module('app', [])
  .config(function() {

  })
  .controller('ctrl', function($scope) {
    $scope.obj = {
      "name": "Item1",
      "price": {
        "public": "10",
        "private": "15",
        "other1": "16.3",
        "other2": "17.5"
      }
    };
    $scope.prop = 'public';
});

And the HTML:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body ng-controller="ctrl">
  <pre>{{obj.price[prop]|json}}</pre>
  <script src="script.js"></script>
</body>

</html>

Basically, {{obj[aPropertyDefinedInScope]}}

answered Aug 23, 2016 at 23:27

Skaparate

4793 silver badges14 bronze badges

Collectives™ on Stack Overflow

How dynamically get the value of a JSON variable in Angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related