AngularJS formatting data based on array of key-value pairs

Question

I have the HTML with Angular below, that simply loops through each result and prints it:

<tr ng-repeat="transaction in transactions | filter:search">
    <td>{{transaction.created}}</td>
    <td><a href="#/transactions/{{transaction.id}}">{{transaction.type}}</a></td>
    <td>{{transaction.amount}}</td>
</tr>

However, the database values of type are send, receive, buy, and sell. When it's displayed in the view, I want it to be as you could expect, a verb (sent, received, bought, sold).

How can I create a JavaScript array with key-value pairs of db value to display value, and display the value from that array where it matches the key (in Angular)?

Josep · Accepted Answer · 2014-09-29 03:50:40Z

1

Assuming that the types that you are getting are something like:

200 for sent
150 for received
25 for bought
354 for sold

You could just create a simple filter, like this:

app.filter('typeToString', function(){
    var types = {'200':'sent', '150':'received', '25':'bought', '354':'sold'};
    return function(type){
         return types[type];
    };
})

And use it like this:

<tr ng-repeat="transaction in transactions | filter:search">
    <td>{{transaction.created}}</td>
    <td><a href="#/transactions/{{transaction.id}}">{{transaction.type|typeToString}}</a></td>
    <td>{{transaction.amount}}</td>
</tr>

Working Example

On the other hand, if the types that you are getting are something like:

0 for sent
1 for received
2 for bought
3 for sold

Then your filter could be like this:

app.filter('typeToString', function(){
    var types = ['sent', 'received', 'bought', 'sold'];
    return function(type){
         return types[type];            
    };
})

Working Example

edited Sep 29, 2014 at 3:50

answered Sep 29, 2014 at 3:35

Josep

13.1k2 gold badges44 silver badges45 bronze badges

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

2 Comments

Billy Assim Over a year ago

Not working -- nothing is being shown in the table for the value.

Josep Over a year ago

@BillyAssim I just made another update with another working example for the other case, have a look at it because this works. If it still doesn't work for you, share the code that you are using and I will help you to make it work, thanks!

Collectives™ on Stack Overflow

AngularJS formatting data based on array of key-value pairs

1 Answer 1

Working Example

Working Example

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related