replacing null data with string "null" in angular js

Question

I have to display table in html page using ng-repeat. most of the entries in table have null data but i am unable to replace null with either empty space or string null. I tried {{ row || 'null' }} but it didnt help. When it generate table it mess it up completely if rows have large number of nulls.

     <table>
        <tr>
            <th ng-repeat="colname in sqldata.collist">{{colname}}</th>
        </tr>
        <tr ng-repeat="rows in sqldata.tablist">
            <td ng-repeat="row in rows">{{ row || 'null' }}</td>
        </tr>
    </table>

What you are doing is correct and should work. If it doesn't then something is wrong with the code you are not showing. — dfsq
– dfsq, Commented Sep 7, 2015 at 19:50
Since there are no borders shown in image...looks like data structure isn't what you think it is — charlietfl
– charlietfl, Commented Sep 7, 2015 at 19:53
I fail to see how this could possibly work; you appear to be iterating over rows that are varying in length, and expecting that when the rows are different lengths, that angular should somehow know which values are "missing"; How is angular supposed to know, if your rows don't have an identifying property name? — Claies
– Claies, Commented Sep 7, 2015 at 21:08
honestly, the correct way to do this would be to structure the data as an object, instead of nested arrays that have no relation to each other. — Claies
– Claies, Commented Sep 7, 2015 at 21:10

Raxa · Accepted Answer · 2015-09-07 19:45:21Z

4

How about the old ng-show and ng-hide trick to show something if a value is 'null'.

Replace

{{ row || 'null' }}

with

<div ng-show="row">{{row}}/div>
<div ng-hide="row">null</div>

answered Sep 7, 2015 at 19:45

Raxa

3823 silver badges7 bronze badges

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

4 Comments

dfsq Over a year ago

OP has table cells. Not only original code {{ row || 'null'}} is correct but also better for performance. Your solution adds 3 watchers for every "cell". Not good.

charlietfl Over a year ago

{{row || 'null'}} works fine here ...problem is elsewhere , probably data isn't as expected

Nomad Over a year ago

@charlietfl i tested with JSTL and it actually replaces null with string 'null'

charlietfl Over a year ago

@Nomad what does JSTL have to do with anything? Inspect your actual data

ste2425 · Accepted Answer · 2015-09-07 20:17:01Z

1

A better option would be to use a filter. This means no duplicated DOM elements, a hidden and shown element. It also keeps logic out of your view.

Plus it makes the 'no data' message standard across your application as you can use it in almost all data binding cases.

<div ng-app="test" ng-controller="ClientCtrl">
    <div ng-repeat="elem in elems">
        {{elem | isempty}}
    </div>
</div>

And your JavaScript

angular.module('test', []).filter('isempty', function() {
    return function(input) {
        return isEmpty(input) ? 'No Value' : input;
    };

    function isEmpty (i){
        return (i === null || i === undefined);
    }
})

http://jsfiddle.net/5hqp5wxc/

Docs: https://docs.angularjs.org/guide/filter

answered Sep 7, 2015 at 20:17

ste2425

4,8473 gold badges26 silver badges39 bronze badges

4 Comments

charlietfl Over a year ago

no need for this when the original code in OP already works. Just adding extra code and overhead for no reason by creating this filter

ste2425 Over a year ago

And following bad practices of using logic within your view. I agree i didn't answer the OP's question directly and offered what i believe to be a better way to solve the problem. This may be 20 lines of extra code but also make maintenance much easier, what if you want to change the 'no data' message? Find every ng-hide or find every logical Or in your view? This also allows you have to a standard implementation that can be used in many other places. But also thanks for actually saying it rather than just down voting and not giving any reason.

charlietfl Over a year ago

point is it doesn't fix OP's problem which I firmly believe has nothing to do with the view code at all but with data structure

ste2425 Over a year ago

And to that point you are correct. I didn't realize it was mostly likely data when i answered the question. Even if i had i would have still written this. Even if it sits at the bottom of the answers it is still a better way to do it and if it helps anyone at all brilliant and it was worth it. I'm sure SO has enough data storage for the few bytes it will take to store this answer.

Lucas · Accepted Answer · 2015-09-07 20:55:38Z

0

Another option is ng-if
 <table>
        <tr>
            <th ng-repeat="colname in sqldata.collist">{{colname}}</th>
        </tr>
        <tr ng-repeat="rows in sqldata.tablist">
            <td ng-repeat="row in rows">
              <span ng-if="row" >{{ row }} </span>
              <span ng-if="!row" > null </span>
            </td>
        </tr>
    </table>

edited Sep 7, 2015 at 20:55

answered Sep 7, 2015 at 20:50

Lucas

10.4k6 gold badges45 silver badges55 bronze badges

1 Comment

ste2425 Over a year ago

Bit of info, ng-if is similar to ng-show/hide. Except it will remove the element from the DOM and re-insert it. ng-show will simply show/hide it.

Collectives™ on Stack Overflow

replacing null data with string "null" in angular js

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related