Display "n/A" if it is null

Question

User265788195 posted

I have something like this.

 

The “AvgHourlyRainfallIntensity” is sometimes returned as null and hence on the interface it shows as empty spot. Instead, whenever it is null, I want to show “N/A”.

 

How and where should I start. I have very basic knowledge about knockout so please explain me as if you would explain a beginner.

 

Thank you,

 

<td class="centered"><span data-bind="numbertext: AvgHourlyRainfallIntensity"></span></td>

 

ko.bindingHandlers.numbertext = {

    update: function (element, valueAccessor, allBindingsAccessor) {

        var value = ko.utils.unwrapObservable(valueAccessor());

 

        var options = ko.utils.unwrapObservable(allBindingsAccessor().numbertextoptions) || {};

        var nullShowsZero = options.nullShowsZero || ko.bindingHandlers.numbertext.defaultOptions.nullShowsZero;

        var precision = options.precision || ko.bindingHandlers.numbertext.defaultOptions.precision;

 

        if ((value === undefined || value === null) && !nullShowsZero) {

            return '';

        }

        var toks = (value || 0).toFixed(precision).replace('-', '').split('.'),

            beforeDecimal = $.map(toks[0].split('').reverse(),

                               function (elm, i) {

                                   return [(i % 3 === 0 && i > 0 ? ',' : ''), elm];

                               }).reverse().join(''),

            afterDecimal = (toks[1]) ? '.' + toks[1] : '',

            display = beforeDecimal + afterDecimal;

 

        var formattedValue = value < 0 ? '-' + display  : display;

 

        ko.bindingHandlers.text.update(element, function () { return formattedValue; });

    },

    defaultOptions: { precision: '2', nullShowsZero: false }

};

Answer 1

User61956409 posted

Hi Nissan,

The “AvgHourlyRainfallIntensity” is sometimes returned as null and hence on the interface it shows as empty spot. Instead, whenever it is null, I want to show “N/A”.

Please check “Protecting against null objects” section, hoping it will be helpful.

http://www.knockmeout.net/2011/08/simplifying-and-cleaning-up-views-in.html

Best Regards,

Fei Han

Answer 2

User265788195 posted

Thank you for the reply.

SO, I tried like this.

 <td class="centered"><span data-bind="text: AvgHourlyRainfallIntensity ? AvgHourlyRainfallIntensity : 'N/A'"></span></td>

It works if it is text, but not with numbertext

 <td class="centered"><span data-bind="numbertext: AvgHourlyRainfallIntensity ? AvgHourlyRainfallIntensity : 'N/A'"></span></td>

I want to use numbertext to format the decimal places.

Did I miss something really important in that link that you sent?

Answer 3

User265788195 posted

Well, I did like this and it works.

<!-- ko if: AvgHourlyRainfallIntensity -->
<td class="centered"><span data-bind="numbertext: AvgHourlyRainfallIntensity"></span></td>
<!-- /ko -->
<!-- ko if: !AvgHourlyRainfallIntensity -->
<td class="centered"><span data-bind="text: 'N/A'"></span></td>
<!-- /ko -->

Is there an easier way or better way?

Answer 4

User-912890261 posted

Hi,

you are not showing what exactly you want, but may be the below will help you.

when ever you have a null value you want to show N/A,, type in view the below

where you want to show the n/a

if(model.value>0){

//show the value 

@html.TextBoxFor(model=>model.value)
}
else
{
<p>N/A</p>
}

May be it will help you.

Regards,

Tahir

Answer 5

User265788195 posted

Hello Tahir,

thanks for the reply. I am using knockout, I see that you are using razor syntax. I want to know what can I use in knockout to make my code simple.