How to display a JSON value in html value as it is using angularJs?

Question

$scope.categories = [ {
      "advertiser_id": "2",
      "tier_id": 1,
      "tier_name": "1",
      "base_cpm_price": "",
      "retarget_cpm": "",
      "gender": "",
      "location": "",
      "ageblock1": "",
      "ageblock2": "",
      "ageblock3": "",
      "ageblock4": "",
      "ageblock5": "",
      "default": 1,
      "status": 1
    },
    {
      "advertiser_id": "2",
      "tier_id": 2,
      "tier_name": "2",
      "base_cpm_price": "",
      "retarget_cpm": "",
      "gender": "",
      "location": "",
      "ageblock1": "",
      "ageblock2": "",
      "ageblock3": "",
      "ageblock4": "",
      "ageblock5": "",
      "default": 1,
      "status": 1
    },
    {
      "advertiser_id": "2",
      "tier_id": 3,
      "tier_name": "3",
      "base_cpm_price": 1,
      "retarget_cpm": 1,
      "gender": 1,
      "location": 1,
      "ageblock1": 10,
      "ageblock2": 0,
      "ageblock3": 0,
      "ageblock4": 0,
      "ageblock5": 0,
      "default": 0,
      "status": 1
    }
  ];

I have a 3 JSON object which i want to display in a HTML view using anjularJS. But when im trying to display in HTML 0 value is considering as empty.

<tr ng-repeat="defaultsettings in listDefaultsettings >
   <td>{{defaultsettings.tier_name }}</td>
   <td>{{defaultsettings.base_cpm_price || '---'}}</td>
   <td>{{defaultsettings.retarget_cpm || '---'}}</td>
   <td>{{defaultsettings.gender || '---'}}</td>
   <td>{{defaultsettings.location || '---'}}</td>
   <td>{{defaultsettings.ageblock1 || '---'}}</td>
   <td>{{defaultsettings.ageblock2 || '---'}}</td>
   <td>{{defaultsettings.ageblock3 || '---'}}</td>
   <td>{{defaultsettings.ageblock4 || '---'}}</td>
   <td>{{defaultsettings.ageblock5 || '---'}}</td>
   <td class="td-active default-pricing">
</tr>

In place of 0 its replacing with --- but i want to display the value ie 0.

Answer 1

Because in javascript 0 is falsy.

 console.log(0||1); console.log(""||"abc"); console.log(undefined||"defined"); console.log(null||"notnull"); 

---

To solve the issue you might get in with ternary if/else operation with angular.isNumber()/angular.isString() methods this way:

// define a method which returns a value
$scope.isEmptyValue = function(val, dashes){
  return (angular.isNumber(val) || !angular.isString(val)) ? val : dashes;
}; 

Now in the view you can do this:

<td>{{ isEmptyValue(defaultsettings.prop, "---") }}</td>

Checkout this at plnkr.

Answer 2

Modify your td's using terenary operator to check existence of the value. If it is not present, only then print ---

   <td>{{(defaultsettings.retarget_cpm != null || defaultsettings.retarget_cpm !== "") ? defaultsettings.retarget_cpm : '---'}}</td>

Answer 3

replace the condition to check for a better falsy value. (i believe you are using "" as a falsy value here)

 <tr ng-repeat="defaultsettings in listDefaultsettings > <td>{{defaultsettings.tier_name }}</td> <td>{{defaultsettings.base_cpm_price===""?defaultsettings.base_cpm_price : '---'}}</td> <td>{{defaultsettings.retarget_cpm===""?defaultsettings.retarget_cpm: '---'}}</td> <td>{{defaultsettings.gender===""?defaultsettings.gender : '---'}}</td> <td>{{defaultsettings.location===""?defaultsettings.location : '---'}}</td> <td>{{defaultsettings.ageblock1===""?defaultsettings.ageblock1 : '---'}}</td> <td>{{defaultsettings.ageblock2===""?defaultsettings.ageblock2 : '---'}}</td> <td>{{defaultsettings.ageblock3===""?defaultsettings.ageblock3 : '---'}}</td> <td>{{defaultsettings.ageblock4===""?defaultsettings.ageblock4 : '---'}}</td> <td>{{defaultsettings.ageblock5===""?defaultsettings.ageblock5 : '---'}}</td> <td class=" td-active default-pricing "> 

Answer 4

You can write a filter for the same

angular.module("my_module_name").filter('ignoreZeroAsFalse', ignoreZeroAsFalse);

function ignoreZeroAsFalse() {
    return filterDefinition;

    function filterDefinition(input) {
        return (input || input === 0)? input : '---'; 
    }

}

And your html will become like following

<td>{{defaultsettings.base_cpm_price | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.retarget_cpm | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.gender | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.location | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock1 | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock2 | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock3 | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock4 | ignoreZeroAsFalse}}</td>
<td>{{defaultsettings.ageblock5 | ignoreZeroAsFalse}}</td>