CODEWITHSUNDEEP
javascripthtmlangularjsjson
Puneeth Kumar
Puneeth Kumar

Reputation: 192

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

$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>

enter image description here

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

Upvotes: 0

Views: 82

Answers (4)

Yogesh Patil
Yogesh Patil

Reputation: 888

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>

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

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>

Upvotes: 0

Jai
Jai

Reputation: 74738

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.

Upvotes: 1

user1496463
user1496463

Reputation: 410

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 ">

Upvotes: 0

Related Questions