Recibo los datos donde muchos campos son nulos y tengo que completar algo si el campo es nulo.
como en los datos de abajo
{ //... IGM_ETD: '2021-11-27T23:59:00+05:00', milestatus: null, transit_depart: null, etd_atd: null, // around 200+ fields }Como aquí, transit_depart es nulo, estoy usando el operador ternario para devolver algo si los datos son nulos como este;
// this is a reproducible example. // there are some other styles and comp to display if/else part {transit_depart ? <>{transit_depart}</> : <>Not Available<>}Esto funciona como se esperaba, pero el problema es que tengo más de 200 campos como este y, si sigo esto, en el futuro, si tenemos que hacer algún cambio en la interfaz de usuario, cambiaremos todo el código relevante aquí. Entonces, ¿cómo evitarlo o cómo podemos manejar esto?
Puedes probar este.
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)Digamos que este es nuestro objeto:
let transitData = { //... IGM_ETD: '2021-11-27T23:59:00+05:00', milestatus: null, transit_depart: null, etd_atd: null, // around 200+ fields } Recorra los values , verifique si es null . Si no es null , puede acceder a los datos de esta manera:
return( <div> {Object.values(transitData).map((value, i) => value === null ? 'Value is Null' : console.log(Object.keys(transitData)[i], value))} </div> ) Ahora, si desea diseñar explícitamente un field determinado, debe crear una función de verificación personalizada para hacerlo. Aquí hay un ejemplo de cómo puede verse:
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> } }Y ahora, se verá así en render:
return( <div> {Object.values(transitData).map((value, i) => value === null ? 'Value is Null' : customFieldStyle(Object.keys(transitData)[i], value)} </div> ) Lo que hará esa función es tomar TODOS los pares key/value que no son null y decorarlos en consecuencia. Simplemente agregue más condicionales para nombres de campo explícitos en customFieldStyle y represente cualquier tipo de estilo que desee usando su elección de CSS y JSX .
Reemplazar datos no disponibles por un valor predeterminado requiere un análisis previo. Lo más probable es que muchos campos tengan diferentes valores predeterminados.
Por ejemplo, 0 para ciertas cantidades; now para algunas fechas, pero first day of the year para otras; " " , "TBD" o "N/A" para algunas cadenas...
Necesita un método para asignar algunos campos a valores predeterminados específicos para esos campos y un valor predeterminado de conmutación por error final para el resto de los campos.
Para los datos de muestra proporcionados
let data = { IGM_ETD: '2021-11-27T23:59:00+05:00', milestatus: null, transit_depart: null, etd_atd: null } es posible que deseemos que el valor predeterminado milestatus sea 0, el valor predeterminado de transit_depart sea el 1 de enero de 2021, y todos los demás campos predeterminados en "N/A" ; podríamos definir un objeto por defecto
{ milestatus: 0, transit_depart: new Date('2021-01-01') } y una función setDefaults para asignar los campos de datos a los valores predeterminados
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; } ejecutando la función contra los datos de muestra setDefaults(data)
transformaría data para contener
{ IGM_ETD:"2021-11-27T23:59:00+05:00", milestatus:0, transit_depart:"2021-01-01T00:00:00.000Z", etd_atd:"N/A" }