Don't render null from JavaScript object's value

Question

I'm looking for most efficient way to output empty string instead of "null" for null values. Is there a way to do this without conditional statements (i.e. if or ternary (? :) operator).

Code sample as follows:

$.each(data, function(index, item) {
  return $("div#SearchResults").append(item.PhoneNumber);
}

when item.PhoneNumber is null, the page renders with a string "null" inside the SearchResults div, instead I wanted to be empty.

Why? Why would you want to avoid evaluating your variables before output? — David Thomas
– David Thomas, Commented Jul 9, 2012 at 10:22
I thought there would be a more efficient way, i.e. some sort of built-in function. I'm surprised there isn't one in either JavaScript or jQuery :( — Ruslan
– Ruslan, Commented Jul 9, 2012 at 10:24
Well, the || (or) operator does this, but the variable's still evaluated first, just without an explicit if or ternary. — David Thomas
– David Thomas, Commented Jul 9, 2012 at 10:26
The conversion of null to string is hard coded at implementation level to be "null" and cannot be changed by user-made code — Esailija
– Esailija, Commented Jul 9, 2012 at 10:31

Esailija · Accepted Answer · 2012-07-09 10:42:03Z

23

$.each(data, function(index, item) {
  return $("div#SearchResults").append(item.PhoneNumber || "");
}

With $.trim (unexpectedly converts null and undefined to empty string):

$.each(data, function(index, item) {
  return $("div#SearchResults").append($.trim(item.PhoneNumber));
}

Unexpected because it's both unintuitive and undocumented.

edited Jul 9, 2012 at 10:42

answered Jul 9, 2012 at 10:19

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

1 Comment

David Thomas Over a year ago

Upvoting because we came up with the same answer at around the same time and, also, because I don't understand the down-vote.

David Thomas · Accepted Answer · 2012-07-09 10:20:13Z

8

If you're really determined not to use an if or ternary to evaluate the variable, then there is the possibility of using the || operator:

$.each(data, function(index, item) {
  return $("div#SearchResults").append(item.PhoneNumber || '');
}

But, honestly, just use a conditional operator, it's what they're meant for, and helps enforce a certain amount of security in your script's execution and output.

answered Jul 9, 2012 at 10:20

David Thomas

254k53 gold badges382 silver badges421 bronze badges

2 Comments

Esailija Over a year ago

At most I'd go for a === null ternarny but not if statement :P

David Thomas Over a year ago

I agree with the your approach to the evaluation method; but I'd still, regardless, explicitly evaluate the variable/return value, rather than relying on the above method (albeit it works, it just feels... wrong, slightly).

Adil · Accepted Answer · 2012-07-09 10:24:06Z

1

Try this,

$.each(data, function(index, item) {
  return $("div#SearchResults").append(item.PhoneNumber?item.PhoneNumber:"");
}

edited Jul 9, 2012 at 10:24

answered Jul 9, 2012 at 10:18

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

Manse Over a year ago

From the OPs question Is there a way to do this without conditional statements (i.e. if or ? :)

David Thomas Over a year ago

I didn't down-vote, but the question specifically requests avoiding the ternary operator (as well as the if), though it's not referred to by name; so is easily missed.

evalarezo · Accepted Answer · 2018-03-02 07:05:07Z

-1

Without JQuery:

$.each(data, function(index, item) {
  return $("div#SearchResults").append([item.PhoneNumber].join(''));
}

answered Mar 2, 2018 at 7:05

evalarezo

1,1538 silver badges13 bronze badges

1 Comment

Tim Over a year ago

'Without jQuery', but it's still jQuery?

Collectives™ on Stack Overflow

Don't render null from JavaScript object's value

4 Answers 4

1 Comment

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related