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.

because in javascript 0 if falsy.

Jai
– Jai

2017-03-03 11:36:30 +00:00
Commented Mar 3, 2017 at 11:36 — Jai
– Jai, Commented Mar 3, 2017 at 11:36
So how can i resolve this issue @Jai

Puneeth Kumar
– Puneeth Kumar

2017-03-03 11:39:12 +00:00
Commented Mar 3, 2017 at 11:39 — Puneeth Kumar
– Puneeth Kumar, Commented Mar 3, 2017 at 11:39
expr >= 0 ? expr : "---" should do that for you.

Jai
– Jai

2017-03-03 11:41:01 +00:00
Commented Mar 3, 2017 at 11:41 — Jai
– Jai, Commented Mar 3, 2017 at 11:41

Jai · Accepted Answer · 2017-03-03 12:41:01Z

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.

edited Mar 3, 2017 at 12:41

answered Mar 3, 2017 at 11:38

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

3 Comments

Puneeth Kumar Over a year ago

Its working.. 0 is displaying but for empty values --- is not displaying :(

Jai Over a year ago

@PuneethKumar just add one or condition too for the empty values.

Puneeth Kumar Over a year ago

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

im using the above code but same issue.. not able to display ---...plz help me @jai

user1496463 · Accepted Answer · 2017-03-03 11:45:00Z

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

Nikhil Aggarwal · Accepted Answer · 2017-03-03 13:21:23Z

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>

Yogesh Patil · Accepted Answer · 2017-03-06 12:17:17Z

0

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>

edited Mar 6, 2017 at 12:17

answered Mar 3, 2017 at 11:41

Yogesh Patil

8984 silver badges14 bronze badges

1 Comment

Puneeth Kumar Over a year ago

Its working.. 0 is displaying but for empty values --- is not displaying :(

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related