I have a json file like

{
"Asian_Cities_Countries":[
{"name":"Beijing",
"country":"China"
},
{"name":"Ankara",
"country":"Turkey"
}
],
"European_Cities_Countries":[
{"name":"Paris",
"country":"France"
},
{"name":"Madrid",
"country":"Spain"
}
]
}

It is just a part of a json file the actual json is quite big. I am fetching this json through angularjs and displaying it my html page as

    <div class="panel-group" id="accordion">
            <div ng-repeat="key in notSorted(items) track by $index" class="panel panel-default menu-panel" ng-init="value = items[key]" style="margin-bottom:10px;">
            <a data-toggle="collapse" data-parent="#accordion" id="menu-link" href="#{{key}}">
                <div class="panel-heading panel-types">
                    <h4 class="panel-title">
                    {{key}}
  </h4>
                </div></a>
                <div id="{{key}}" class="panel-collapse collapsing menu-items">
                    <div ng-repeat="item in value">
                        <div class="row">
                            <div class="col-sm-12 col-lg-3">
                                <p class="item-name">
                                {{item.name}}
                                </p>
                            </div>
                            <div class="col-sm-12 col-lg-3">
                                <p>{{item.country}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Now I want to remove underscores from the key value and replace it with blank spaces.How do i do it.

I tried {{key.replace('_',' ')}} . But it removes only the first underscore and not all of them.

I have a json file like

{
"Asian_Cities_Countries":[
{"name":"Beijing",
"country":"China"
},
{"name":"Ankara",
"country":"Turkey"
}
],
"European_Cities_Countries":[
{"name":"Paris",
"country":"France"
},
{"name":"Madrid",
"country":"Spain"
}
]
}

It is just a part of a json file the actual json is quite big. I am fetching this json through angularjs and displaying it my html page as

    <div class="panel-group" id="accordion">
            <div ng-repeat="key in notSorted(items) track by $index" class="panel panel-default menu-panel" ng-init="value = items[key]" style="margin-bottom:10px;">
            <a data-toggle="collapse" data-parent="#accordion" id="menu-link" href="#{{key}}">
                <div class="panel-heading panel-types">
                    <h4 class="panel-title">
                    {{key}}
  </h4>
                </div></a>
                <div id="{{key}}" class="panel-collapse collapsing menu-items">
                    <div ng-repeat="item in value">
                        <div class="row">
                            <div class="col-sm-12 col-lg-3">
                                <p class="item-name">
                                {{item.name}}
                                </p>
                            </div>
                            <div class="col-sm-12 col-lg-3">
                                <p>{{item.country}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Now I want to remove underscores from the key value and replace it with blank spaces.How do i do it.

I tried {{key.replace('_',' ')}} . But it removes only the first underscore and not all of them.

• javascript
• angularjs
• json

• you can use filter – Hadi Commented Mar 15, 2016 at 19:58

4 Answers 4

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.items = {
     "Asian_Cities_Countries":
           [
             {"name":"Beijing","country":"China"},
             {"name":"Ankara","country":"Turkey"}
           ],
      "European_Cities_Countries":
          [
             {"name":"Paris","country":"France"},
             {"name":"Madrid","country":"Spain"}
          ]
 };
  
  });

app.filter('removeUnderscores', [function() {
return function(string) {
    if (!angular.isString(string)) {
        return string;
    }
    return string.replace(/[/_/]/g, ' ');
 };
}])

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
            <div ng-repeat="(key,value) in items track by $index" class="panel panel-default menu-panel" ng-init="value = items[key]" style="margin-bottom:10px;">
            <a data-toggle="collapse" data-parent="#accordion" id="menu-link" href="#{{key}}">
                <div class="panel-heading panel-types">
                    <h4 class="panel-title">
                    {{key | removeUnderscores}}
  </h4>
                </div></a>
                <div id="{{key}}" class="panel-collapse collapsing menu-items">
                    <div ng-repeat="item in value">
                        <div class="row">
                            <div class="col-sm-12 col-lg-3">
                                <p class="item-name">
                                {{item.name}}
                                </p>
                            </div>
                            <div class="col-sm-12 col-lg-3">
                                <p>{{item.country}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

try this. use a filter similar this

 app.filter('removeUnderscores', [function() {
return function(string) {
    if (!angular.isString(string)) {
        return string;
    }
    return string.replace(/[/_/]/g, ' ');
 };
}])

and in html

   {{key | removeUnderscores}}

Seems you forgot the global modifier, try this:

key.replace(/_/g,' ')

with "g" all occurences should be replaced

The AngularJS Docs specifically state that Angular Expressions don't include regular expressions.

Angular Expressions vs. JavaScript Expressions

Angular expressions are like JavaScript expressions with the following differences:

• No RegExp Creation With Literal Notation: You cannot create regular expressions in an Angular expression.

-- AngularJS Developer Guide - Expressions

Instead use a custom filter as remended by @hadijz

app.filter('removeUnderscores', [function() {
return function(string) {
    if (!angular.isString(string)) {
        return string;
    }
    return string.replace(/[/_/]/g, ' ');
 };
}])

and in html

{{key | removeUnderscores}}

Just a question. Why aren't you processing the json file/data within a service? This much processing (especially string replacing) isn't meant to be done in either the HTML or the controller in AngularJS. I'd remend that you parse the json inside a service and then pass it to the controller. That's usually the best practice..

Please see this JSBIN for reference. Thank you