CODEWITHSUNDEEP
jsonangularjs
Richard de Ree
Richard de Ree

Reputation: 2540

Angularjs Display single element from json

I have a json file which contains different prices for a service, depending on the day of the week (in the weekend it's more expensive) I use angular to show these prices using a lines like this:

 <div ng-repeat="arr in arrangementen | filter:'_1'" >Mon-Fri: € {{arr.prijs_ma_vr | number :2 }} </div>
 <div ng-repeat="arr in arrangementen | filter:'_1'" >Sat: € {{arr.prijs_za | number :2 }} </div>

json:

{
        "id": "_1", 
        "arrangement": "Vriendinnendag", 
        "prijs_ma_vr": 99.95, 
        "prijs_za": 103.95, 
        "prijs_zo": 104.95, 
},
{
        "id": "_2", 
        "arrangement": "Vipdag", 
        "prijs_ma_vr": 199.95, 
        "prijs_za": 205.95, 
        "prijs_zo": 209.95, 
}

I wonder if there is more smart and easier way to display these prices or other elements from this json. Sometimes I just want to display one element (i.e. one price)

(Example in this site: wellness example

Upvotes: 0

Views: 2399

Answers (2)

jme11
jme11

Reputation: 17374

I see you already accepted the other answer, but I wanted to give you another option, which is to create your own filter.

angular.module('demo',[])

.controller('MainCtrl', ['$scope', function($scope){ 

$scope.arr = [{ "id": "_1", 
                "arrangement": "Vriendinnendag",
                "prijs_ma_vr": 99.95,
                "prijs_za": 103.95,
                "prijs_zo": 104.95, }, 
              { "id": "_2", 
                "arrangement": "Vipdag",
                "prijs_ma_vr": 199.95,
                "prijs_za": 205.95,
                "prijs_zo": 209.95, }];
}])

.filter('weekdayPrice', function(){
  return function(obj, id) {
    var rtnval;
    angular.forEach(obj, function(value){
      if (value.id === id) {
        return rtnval = value.prijs_ma_vr;
      };
    });
    return rtnval;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="demo" ng-controller="MainCtrl">
  <div>Weekday Price: {{arr | weekdayPrice: '_2' | number: 2 | currency: '€'}}</div>
</div>

So this custom filter takes an id and returns just the weekday price from the object whose id matches the id you passed into the filter. You can use it just like any other filter so you can chain them together just like the built in filters, allowing you to add additional filters such as currency or number to the value that is returned by the custom weekday filter.

The benefits are that you can reuse your custom filters throughout your application; you don't have to change your current json format; and more importantly, you don't have to figure out the array index of the item which is definitely prone to errors.

Upvotes: 1

Nagasimha Iyengar
Nagasimha Iyengar

Reputation: 461

I would rework the json and do it this way:

{
        "id": "_1", 
        "arrangement": "Vriendinnendag", 
        "prijs":[ 99.95, 103.95, 104.95 ],
    “day”:['Mon-Fri','Sat','Sun']
},
{
        "id": "_2", 
        "arrangement": "Vipdag", 
        "prijs":[ 199.95, 203.95, 204.95 ],
    “day”:['Mon-Fri','Sat','Sun']
}

<div ng-repeat="arr in arrangementen | filter:'_1'" >
day[0] € {{arr.prijs[0] | number :2 }}<br>
day[1] € {{arr.prijs[1] | number :2 }}<br>
day[2] € {{arr.prijs[2] | number :2 }}
 </div>

Upvotes: 1

Related Questions