AngularJs Data Manipulation before display

Question

I have a simple table in which there are 2 columns: a) Name b) Country. Currently it works fine and displays name of the user and country.

Now I want to add a condition so that if the country is Germany then instead of Germany it should print Europe and if country is Argentina or Brazil it should print South America, for other countries it will remain same, for example UK, Sweden or any other country will be printed as it is.

My angular code is this ::

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://localhost/test/user_data.php")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>

</body>
</html>

And json data in my user-data.php file is this::

{
    "records":[
    {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
    {"Name":"Ana Trujillo Emparedados","City":"México D.F.","Country":"Mexico"},
    {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
    {"Name":"Around the Horn","City":"London","Country":"UK"},
    {"Name":"B's Beverages","City":"London","Country":"UK"},
    {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
    {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
    {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},
    {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
    {"Name":"Bon app'","City":"Marseille","Country":"France"},
    {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
    {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
    {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
    {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
    {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
    ]
}

how can I do this in services?

D555
– D555

2016-07-12 06:56:37 +00:00
Commented Jul 12, 2016 at 6:56 — D555
– D555, Commented Jul 12, 2016 at 6:56

gyc · Accepted Answer · 2016-07-12 08:34:58Z

3

There are numerous ways to achieve this in angular. (directives, functions, services, ng-if...etc.)

The cleanest in your case would be a custom filter:

.filter('countryFormat', function() {
    return function(input) {
        if (input != undefined) {
           //Your switch case here
           return 'South America'; // for example
        }
    }
});

And in the html:

<td>{{ x.Country | countryFormat }}</td>

edited Jul 12, 2016 at 8:34

answered Jul 12, 2016 at 6:50

gyc

4,3586 gold badges37 silver badges55 bronze badges

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

Comments

Arif · Accepted Answer · 2016-07-12 06:42:40Z

you should create a function inside your controller to check which country it is and should decide what to output

check the Fiddle

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.names =[
    {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
    {"Name":"Ana Trujillo Emparedados","City":"México D.F.","Country":"Mexico"},
    {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
    {"Name":"Around the Horn","City":"London","Country":"UK"},
    {"Name":"B's Beverages","City":"London","Country":"UK"},
    {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
    {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
    {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},
    {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
    {"Name":"Bon app'","City":"Marseille","Country":"France"},
    {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
    {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
    {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
    {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
    {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
    ]

    $scope.getCountry = function(country) {
    if(country === 'Germany'){
    return 'EU'
    } else {
    return country
    }
    }

});

and use it in html like below

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ getCountry(x.Country) }}</td>
  </tr>
</table>

</div>

Vikash Kumar · Accepted Answer · 2016-07-12 06:46:56Z

1

inside td of name

<td><div ng-if="x.name=="Germany">Europe</div><div ng-if="x.name=="argentina||brazil">south america</div>

answered Jul 12, 2016 at 6:46

Vikash Kumar

1,7161 gold badge12 silver badges17 bronze badges

Comments

Gayathri Mohan · Accepted Answer · 2016-07-12 06:51:12Z

0

you can use the ng-switch also

 <td ng-switch on="x.Country">
        <div ng-switch-when="Germany ">Europe </div>
        <div ng-switch-when="Argentina">South America</div>
         <div ng-switch-when="Brazil ">South America</div>
         <div ng-switch-when="Brazil ">South America</div>
         <div ng-switch-default>{{x.Country}}</div>
      </td>

for refrence https://plnkr.co/edit/OFWhePEJEuHSrBR3zW9i

answered Jul 12, 2016 at 6:51

Gayathri Mohan

2,9724 gold badges21 silver badges26 bronze badges

Comments

Pawan Mishra · Accepted Answer · 2016-07-12 06:55:38Z

0

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td ng-if = "x.Country === 'Germany'">Europe</td>
    <td ng-if = "x.Country === 'Argentina'|| x.Country ==='Brazil'">South America</td>
    <td ng-if = "x.Country !== 'Argentina' || x.Country !== 'Brazil' || x.Country !== 'Germany'">{{x.Country}}</td>
  </tr>
</table>

answered Jul 12, 2016 at 6:55

Pawan Mishra

112 bronze badges

1 Comment

abarisone Over a year ago

It's always better to add an explanation to the code you're posting as an answer, so that it will helps visitors understand why this is a good answer.

score 0 · Accepted Answer · 2016-07-12 07:05:26Z

0

You can do this:

            <table>
            <tr ng-repeat="x in names">
                <td>{{ x.Name }}</td>
                <td ng-hide="(x.Country == 'Argentina' || x.Country == 'Brazil' || x.Country == 'Germany')">{{ x.Country }}</td>
                <td ng-show="x.Country=='Germany'">Europe</td>
                <td ng-show="x.Country == 'Argentina' || x.Country == 'Brazil'">South America</td>
            </tr>
        </table>

edited Jul 12, 2016 at 7:05

answered Jul 12, 2016 at 6:52

user6570507

Collectives™ on Stack Overflow

AngularJs Data Manipulation before display

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related