Tengo el siguiente código JS donde estoy mostrando un estado diferente según la clave de respuesta de la API. ¿Hay algún enfoque mejor para optimizar este código para que no tenga que verificar cada caso con IF, en caso de que aumente la cantidad de estados?
if (data.shippingStatus) { let shippingStatus = data.shippingStatus.toString(); if (shippingStatus === "AWAITING_SHIPMENT") { shippingStatus = "Awaiting Shipment"; } else if (shippingStatus === "SHIPPED") { shippingStatus = "Shipped"; } else if (shippingStatus === "DELIVERED") { shippingStatus = "Delivered"; } else if (shippingStatus === "CANCELLED") { shippingStatus = "Cancelled"; } resData.push(setData(data.shippingStatus ? shippingStatus : "")); }Pruebe el mapeador de objetos:
const statusMapper: {[key:string]: string} = { AWAITING_SHIPMENT: "Awaiting Shipment", SHIPPED: "Shipped", DELIVERED: "Delivered", CANCELLED: "Cancelled" }; if (data.shippingStatus) { let shippingStatus = data.shippingStatus.toString(); resData.push(setData(data.shippingStatus ? statusMapper[shippingStatus] : "")); }EDITAR : tipo agregado al mapeador
Hay diferentes enfoques para su pregunta. Si solo está buscando una solución sólida para el problema actual, también conocido como valores de mapeo, puede crear un mapeador de objetos como sugieren las otras respuestas o simplemente una función simple que formatea su cadena, por ejemplo:
var text = "AWAITING_SHIPMENT"; text = text.toLowerCase() .split('_') .map((s) => s.charAt(0).toUpperCase() + s.substring(1)) .join(' '); console.log(text);Pero si está investigando el tema en un sentido más amplio, puede usar el envío dinámico a través del polimorfismo. Este es un ejemplo que usa polimorfismo para cambiar el comportamiento basado en un tipo.
Cómo funciona mi implementación, divide el estado por _ y lo capitaliza, y finalmente devuelve un nuevo estado, según sea necesario
// Dummy Data const data = { shippingStatus:"AWAITING_SHIPMENT" } // New Proposal if(data.shippingStatus){ const { shippingStatus } = data; const status = shippingStatus.split('_') .map(string => string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()) .join(" "); console.log(status) // no need to check for data.shippingStatus twice // while you're still within if condition, just do the following : // resData.push(setDate(status)) }