0

I have the following problem:

const barcodeValue = element.dataset.barcode;

// the above value is sent as an argument to be verified by the function below..

if(!barcodeValue){

// run code

}

now dataset.barcode comes from the database... currently in the schema the field barcode does not exist. So I don't know what value comes into the barcodeValue but I assumed it to be undefined and console.logging it confirmed this..

however if I add the barcode field in the database and keep it empty, the barcodeValue is treated as falsy and it works fine.. so the value of an empty field is falsy but the value of non-existent field (even though it shows as undefined) is not falsy..

But if the barcode field does not exist in the database, I assumed it would be undefined and it would still work. But it doesn't.. I tried to google this but couldn't find an explanation..

If the above question doesn't anger you (as my previous query did) and you can treat it as a genuine query, I would appreciate some guidance..

Here's the button

  <button class="btn ticket__print-ticket" data-id=${user._id} data-barcode=${user.barcode}> Print Ticket </button>
  </div>

Here's the argument being sent on event

  if (modalContent) {
  modalContent.addEventListener("click", function(e) {
    e.preventDefault();

    if (e.target.closest(".ticket__print-ticket")) {
      const printTicketBtn = e.target;
      const id = printTicketBtn.dataset.id;
      const barcode = printTicketBtn.dataset.barcode;

      console.log(id, barcode);

      printTicket(barcode);
    }

And here's the code that does not respond when the database field does not exist (even though it shows as undefined when I console.log it

Image to show the value of barcode is undefined


export const printTicket = async function(barcode) {
  // console.log(barcode)
  if (!barcode) {
    console.log("in");
    showMessage(
      "Ticket Not Ready",
      "The ticket process requires approval and should be completed soon. You will have a response soon. However you can show the QR Code at the Entrance and generate the ticket immediately"
    );
    return;
  }
Dave Newton
  • 158,873
  • 26
  • 254
  • 302
Alim Bolar
  • 479
  • 4
  • 17
  • 2
    Has your `undefined` been turned into a string somewhere? What does `typeof barcode` yield? – Wing Sep 20 '21 at 15:32
  • 1
    First thing to do is to include the *rendered HTML* of the button in question, because what you're showing isn't valid HTML or JS. It's likely a string representation is rendered, which wouldn't be shown by your current debug logging, since both `undefined` and `"undefined"` would look the same in a naive console log. – Dave Newton Sep 20 '21 at 15:34
  • 2
    Tested my above theory out by doing `console.log('undefined', undefined)` and compared to `console.log('undefined', 'undefined')` in the console. This seems the confirm my theory. `undefined` will appear in a lighter colour compared to a string. Looking in your screenshot of the console, "undefined" appears to be the same colour as the ID string next to it. – Wing Sep 20 '21 at 15:37
  • @Wing .. yes, you are right.. the typeof barcode is showing as a string.. but how? – Alim Bolar Sep 20 '21 at 15:39
  • 1
    Because a value that's `undefined` will likely *render* as `"undefined"` but there's no way to know because we have no way of knowing what your JS/templating mechanism/whatever it is actually *is*. This is why you always look at (and include in the question) the *rendered HTML* because *that* is what matters to the client code. – Dave Newton Sep 20 '21 at 15:40
  • @DaveNewton.. would appreciate some help on what exactly I should show more.. coz if the `if` doesn't work then it shows some HTML which is not relevant to this question.. so I wasn't sure what else to show as rendered HTML.. – Alim Bolar Sep 20 '21 at 15:42
  • @AlimBolar The rendered HTML of *the button in question*. You're accessing the data *of that button* so the first step is to look at the button *as rendered in the browser* to see what data is tied to the DOM element. You'll almost certainly see that `data-barcode` has the value `"undefined"`, which isn't falsey. – Dave Newton Sep 20 '21 at 15:45
  • @Wing so that means the value from a database field that does not exist is a string and it's not falsy.. is that right? Then why is an empty field falsy?.. isn't that also a string? – Alim Bolar Sep 20 '21 at 15:45
  • @AlimBolar Empty strings are falsey because JS says it is. – Dave Newton Sep 20 '21 at 15:46
  • @AlimBolar ... When you inspect the rendered button what do you see? – Dave Newton Sep 20 '21 at 15:48
  • 2
    When `user.barcode` is `undefined` and it gets interpolated into ` – Wing Sep 20 '21 at 15:49
  • @DaveNewton.. Got it..:-).. so empty strings are falsy.. and if a database field does not exist then the value is a string that's 'undefined' which is not the same as `undefined` .. am I right? – Alim Bolar Sep 20 '21 at 15:49
  • Got it..:-)... thanks guys..:-).. – Alim Bolar Sep 20 '21 at 15:50
  • @DaveNewton .. yes, you are right.. the rendered button does show 'undefined' as a string.. thanks for helping me learn how to view js results in html..:-).. I mean I knew the console.log method but didn't realise that I could see the results on template literals this way too..;-).. – Alim Bolar Sep 20 '21 at 15:55
  • 2
    @AlimBolar The *value* is `undefined` (not a string). How that value is *rendered*, i.e., how it's represented in the DOM, depends on the mechanism being used to do that representation, e.g., the templating system, the framework, etc. That's why the first step is to look at the rendered HTML, then check whatever you're using to generate the HTML to see what the solution is--it may be built-in, it may require conditional rendering, etc. – Dave Newton Sep 20 '21 at 15:55

0 Answers0