Can I add an if-construction while rendering?

arie0512

I see some options for adding an If construction while rendering, see https://datatables.net/manual/data/renderers

But I can't figured it out how to add this one. I have now this render:

columns: [                
    { data: null, render: (data) => data.client.gender + ' ' + data.client.firstname + ' ' + data.client.lastname
    }
]

If the records hold this data:
Gender Firstname Lastname
M John Doe

Than I would like to have in the column Mister John Doe.

How to add the if-contruction into the render?

I have try to add ... => if (data.client.gender === 'M') { return Mister } but I get an error for using 'if'

Any idea how to achieve this?

Best regards,

Arie

allan

Hi Aire,

You sure can, but your Javascript synax for the arrow function is slightly wrong. You need brackets around the function:

render: (data) => {
  if (...) {
    return a;
  }
  return b;
}

For more details on the Javascript syntax for arrow functions, the MDN reference is excellent.

Allan

kthorngren

but I get an error for using 'if'

Looks like you need to place quotes around Mister like this:

=> if (data.client.gender === 'M') { return "Mister" }

If this doesn't help then please provide a link to a test case so we can see exactly what you have and the error you are getting so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

arie0512

Hi Allan and Kevin,

Tnx for getting back to me, it was the missing brackets who bracks it up.

The next 'problem' is that the first and last name isn't showing now, I get only the results from the IF construction but no first name and last name.

{ data: null, render: (data) => { 
      if (data.client.gender === 'M') { 
        return "Sir"; 
      } else if (data.client.gender === 'V') { 
        return "Madam"; 
      } else {
        return "Sir/madam";
      }
      return data.client.firstname + ' ' + data.client.lastname;
    } },

Any idea how to add the first and last name into the column?

Best regards,

Arie

kthorngren

Your if/else logic will never allow the return statement in line 9 to be executed. One option is to concatenate the first and last name to each return statement above, for example:

      if (data.client.gender === 'M') {
        return "Sir " + data.client.firstname + ' ' + data.client.lastname;

And remove line 9. Or do something like this:

{ data: null, render: (data) => {
      let prefix = "Sir/madam";
      if (data.client.gender === 'M') {
        prefix =  "Sir";
      } else if (data.client.gender === 'V') {
        prefix =  "Madam";
      } 
      return prefix + data.client.firstname + ' ' + data.client.lastname;
    } },

Kevin

arie0512

Hi Kevin, Tnx a lot for clearing this one out for me, it's working like a charm now!