How to remove repeated code for ternary operator?

Question

I'm receiving the data where a lot of fields are null, and I have to populate something if the field is null.

like in the below data

{   //...
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
    // around 200+ fields
 }

As here, the transit_depart is null, I'm using the ternary operator to put something in return if the data is null like this ;

// this is a reproducible example.
// there are some other styles and comp to display if/else part
{transit_depart ? <>{transit_depart}</> : <>Not Available<>}

This is working as expected but the problem is I have around 200+ fields like this and if I follow this then in the future if we have to make any UI change then we will be changing all the relevant code here. So how to avoid it or how can we can manage this.

Answer 1

Replacing unavailable data with a default value requires a previous analysis. Most probably many fields may have different default values.

For example, 0 for certain amounts; now for some dates, but first day of the year for others; " ", "TBD" or "N/A" for some strings...

You need a method to map some fields to specific default values for those fields, and a final failover default for the rest of the fields.

For the sample data provided

let data = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null    
}

we might want that milestatus default be 0, the transit_depart default be the Jan 1st 2021, and all the other fields default to "N/A"; we could define a defaults object

  {
    milestatus: 0,
    transit_depart: new Date('2021-01-01')
  }

and a setDefaults function to map the data fields to the defaults

function setDefaults(data) {
  const someDefaults = {
    milestatus: 0,
    transit_depart: new Date('2021-01-01')
  }
  const theDefault = "N/A";  
  for (const [key, value] of Object.entries(data)) {
    if (value==null) {
      if (someDefaults[key]!=null) {
        data[key] = someDefaults[key]
      } else {
        data[key] = theDefault;
      }
    }
  }
  return data;
}

running the function against the sample data setDefaults(data)

would transform data to contain

{
  IGM_ETD:"2021-11-27T23:59:00+05:00",
  milestatus:0,
  transit_depart:"2021-01-01T00:00:00.000Z",
  etd_atd:"N/A"
}

Answer 2

Simply iterate through your data, checking each value as you go.

var data = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
    // around 200+ fields
}

for(let prop in data)
{
  console.log(data[prop] ? `<>${data[prop]}</>` : "<>Not Available<>" );
}

Answer 3

You can try this one.

var data = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
    // around 200+ fields
}

Object.keys(data).forEach(x => {
  if(!data[x])
     data[x] = '<>Not Available<>'
});

console.log(data)

Answer 4

You can do the following to clean up the code:

const incommingData = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
};

// Generic function component for field
const Field = ({ data }) => {
    if (isMySpecifcField) {
        return <SpecificFieldComponent />;
    }
    return data ? data : 'Not Available';
};

// rendering the fields

{
    Object.keys(incommingData).map((fieldData) => {
        return <Field data={fieldData} />;
    });
}

Answer 5

Let's say this is our object:

let transitData = {   //...
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
    // around 200+ fields
 }

Loop through the values, check if null. If not null, you can access the data like so:

return(
   <div>
     {Object.values(transitData).map((value, i) => value === null ? 'Value is Null' : console.log(Object.keys(transitData)[i], value))}
   </div>
)

Now, if you want to explicitly style a certain field, you need to build a custom check function to do so. Here is an example of how it may look:

const customFieldStyle = (fieldName, value) => {
    if (fieldName === 'milestatus'){
        return <span id={custom_mile_styler}>{value}</span>
    } else {
        // this is where you'll put your default style
        return <span id={default_field_styler}>{value}</span>
    }
}

And now, it will look like this in render:

return(
   <div>
     {Object.values(transitData).map((value, i) => value === null ? 'Value is Null' : customFieldStyle(Object.keys(transitData)[i], value)}
   </div>
)

What that function will do is take ALL the key/value pairs that are not null and decorate them accordingly. Simply add more conditionals for explicit field names in the customFieldStyle and render whatever type of styling you want using your choice of CSS and JSX.

Answer 6

Just use an OR statement:

<>{transit_depart || 'Not Available'}</>

If transit_depart is defined, the value will be used. If not, it will use 'Not available'.

The problem with previous solution is that 0 will be also omitted since its falsy. To avoid this, you can use Nullish coalescing operator (check if your environment support it):

<>{transit_depart ?? 'Not Available'}</>

Answer 7

One options it create a function to validate:

const itsAvailable = (value) => {
  return value ?? 'Not Available'
 }
 
console.log(itsAvailable(null)) // will return Not Available

console.log(itsAvailable(34)) // wil return 34

And then just map the object like this

{ Object.keys(<your object>).map(field=> itsAvailable(<your object>[field]) ) 

Answer 8

I think you can do the following

const incommingData = {
    IGM_ETD: '2021-11-27T23:59:00+05:00',
    milestatus: null,
    transit_depart: null,
    etd_atd: null,
};

const notAvailableMessage = 'Not Available'

// rendering the fields
function Compoennt() {
    return (
        <div>
           Field 1: {incomingData.field1 || notAvailableMessage}
           Field 2: {incomingData.field2 || notAvailableMessage}
           Field 3: {incomingData.field3 || notAvailableMessage}
        </div>
    )
}