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 p 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.

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 p 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.

• javascript
• reactjs

Share Improve this question Follow edited May 5, 2022 at 17:07 Lee Taylor 7,9941616 gold badges3737 silver badges5353 bronze badges asked May 5, 2022 at 16:53 atropa belladonaatropa belladona 52411 gold badge1111 silver badges2929 bronze badges 5

• 1 You can get the list of keys of the object. map them, see if the obj.key is null. If null, return what you need to replace the vale, else, return the same value – NightEye Commented May 5, 2022 at 16:58
• This is one object, having all these types of different fields, how can I map this? – atropa belladona Commented May 5, 2022 at 17:00
• 2 Getting the keys via object.keys() should get all fields. Accessing obj.key of the list of keys should get all values. Just use parison after getting the values to see if you need to replace the value or not – NightEye Commented May 5, 2022 at 17:01
• I would strongly warn you against doing blanket fill-ins for all fields. null is useful in that it shows that there is no value set for this key. If you just start filling things in, you may fill in with the wrong data type (for instance a string where a number is required) and you might not be able to determine what fields have "real" values, and which are auto-fill-ins. – ControlAltDel Commented May 5, 2022 at 17:04
• 1 I can see a lot of answers showing map function, like this but what if I have some fields where I don't want to use the same style which will be mapped for all of the fields. ? Or say if I want to exclude some of them with this map function? – atropa belladona Commented May 5, 2022 at 17:14

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 2

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"
}

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<>" );
}

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)

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.

You can do the following to clean up the code:

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

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

// rendering the fields

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

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'}</>

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]) ) 

I think you can do the following

const iningData = {
    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: {iningData.field1 || notAvailableMessage}
           Field 2: {iningData.field2 || notAvailableMessage}
           Field 3: {iningData.field3 || notAvailableMessage}
        </div>
    )
}