Angularjs Display single element from json - json

Question

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

Answer 1

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>

Answer 2

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.