Creating a If/Else Statement in JS which is dependant on a data attribute

Question

So I have an app, which contains a button directing people to my 'Ccenter', normally this would bring me to a .DE domain, but I want to create the ability for it to redirect to the .AT instance of my site.

I can decide which domain the button should bring me to by looking at my recipient data, which always contains a country specific email address.

'recipient_email':data.ticket.recipient,

I thought the best way for this to work is an If/Else Statement on the Button itself, where I could use if “data.ticket.recipient.contains?(.de)” to ensure the button links to the .DE app instance, otherwise link to the .AT instance.

I'm unsure how to structure that statement within my code, and would appreciate some pointers or advice on if this is the best way to achieve what I'm aiming for.

Current code:

client.get(`ticket.customField:${cCenterCaseIdFieldName}`).then((result) => {
          updateDataPoints(result, data, cCenterCaseIdFieldName);
          const recipientEmail = data.ticket.recipient;
          const zendeskID = data.ticket.id;
          const cCenterUrlAustria = getAustrianCcenterUrl(zendeskID)
          const cCenterUrl = getCcenterUrl(zendeskID);
          const collapse = $('#collapseExample')
          $("#myBtnToCcenter").click(() => openModalPopup(cCenterUrl));
          $("#myBtnToAustrianCcenter").click(() => openModalPopup(cCenterUrlAustria));

Modal Pop Up Which Results From Button Click:

  function openModalPopup(locationUrl) {
  const modalOptions = {
    location: 'modal',
    url: locationUrl,
    size: {
      width:  '80vw',
      height: '80vh'
    }
  };

So what you want is to use one button only, instead of both #myBtnToCcenter and #myBtnToAustrianCcenter? — Anis R.
– Anis R., Commented Oct 13, 2021 at 13:27
@AnisR. exactly, theres no room in this mini-app for a third button — cbln
– cbln, Commented Oct 13, 2021 at 13:30
We can just set the url to search for specific string you are looking for and update the constant accordingly using a ternary as below const recipientEmail = data.ticket.recipient; const cCenterUrl = recipientEmail.includes(".de") ? getCcenterUrl(zendeskID) : getAustrianCcenterUrl(zendeskID); $("#myBtnToCcenter").click(() => openModalPopup(cCenterUrl)); — Mounik Reddy
– Mounik Reddy, Commented Oct 13, 2021 at 13:38

john Smith · Accepted Answer · 2021-10-13 13:56:44Z

2

i guess you could just do sth. like this:

const recipientEmail = data.ticket.recipient;
var cCenterUrl;
if(recipientEmail.indexOf(".de") > 0) {
    cCenterUrl = getCcenterUrl(zendeskID);
}else{
    cCenterUrl = getAustrianCcenterUrl(zendeskID)
}
$("#myBtnToCcenter").click(() => openModalPopup(cCenterUrl));

and just use 1 button, if cCenterUrl can change during runtime, u cannot use const of course

edited Oct 13, 2021 at 13:56

answered Oct 13, 2021 at 13:29

john Smith

18k12 gold badges80 silver badges124 bronze badges

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

2 Comments

cbln Over a year ago

Thanks for your answer, the only issue here for me is, that cCenterUrl becomes undefined due to being in the if/else statement.

john Smith Over a year ago

ok, with my update it should definetly work

Anis R. · Accepted Answer · 2021-10-13 13:33:33Z

1

One way would be to get the correct URL first, then set the onClick handler accordingly. Something like:

var url = data.ticket.recipient.includes(".de") ? getCcenterUrl(zendeskID) : getAustrianCcenterUrl(zendeskID);

$("#myBtnToCcenter").click(() => openModalPopup(url));

Side note: The includes() function is case-sensitive. If you are not sure of the case (upper/lowercase) of the data.ticket.recipient string, then you can do

data.ticket.recipient.toLowerCase().includes(".de".toLowerCase())

instead of data.ticket.recipient.includes(".de").

answered Oct 13, 2021 at 13:33

Anis R.

7,0022 gold badges17 silver badges44 bronze badges

Collectives™ on Stack Overflow

Creating a If/Else Statement in JS which is dependant on a data attribute

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related