Angularjs Display single element from 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

Nagasimha Iyengar · Accepted Answer · 2015-05-12 11:38:32Z

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>

answered May 12, 2015 at 11:38

Nagasimha Iyengar

4615 silver badges8 bronze badges

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

2 Comments

Richard de Ree Over a year ago

Good suggestion, but sometimes I just need one single element. I was wondering if I could display one element without using ng-repeat. (I jest edited my question to make this more clear)

Richard de Ree Over a year ago

Thank you, this is work like I needed :) I used {{arrangementen[0].prijs_ma_vr}} btw. The ng-repeat need to be replaced by something like: <div ng-bind="arr in arrangementen"</div>

jme11 · Accepted Answer · 2015-05-12 12:52:27Z

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.

I've just tried this and it's great way to do it too and I searched for this to use in another app. For the app, I asked this question the first solution, is limited, but because of it's simplicity it will work better. Thanks alot anyway for this suggestion.

Collectives™ on Stack Overflow

Angularjs Display single element from json

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related