Maximizing conditional evaluation in typescript

Question

Maximizing conditional evaluation in typescript

I have the following JavaScript code where I am displaying different status based on the response key from an API. Is there a more efficient approach to optimize this code so that I don't have to check each case with IF, especially if the number of statuses increases?

if (data.shippingStatus) {
  let shippingStatus = data.shippingStatus.toString();
  
  const statusMap = {
    "AWAITING_SHIPMENT": "Awaiting Shipment",
    "SHIPPED": "Shipped",
    "DELIVERED": "Delivered",
    "CANCELLED": "Cancelled"
  };
  
  shippingStatus = statusMap[shippingStatus] || "";

  resData.push(setData(data.shippingStatus ? shippingStatus : ""));
}

javascript typescript

Answer 1

Answer №1

Consider using an object mapper for this task:

const shipmentStatusMapper: {[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 ? shipmentStatusMapper[shippingStatus] : ""));
}

UPDATE: Included a type declaration in the mapper for better clarity.

Answer 2

Consider using an object mapper for this task:

const shipmentStatusMapper: {[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 ? shipmentStatusMapper[shippingStatus] : ""));
}

UPDATE: Included a type declaration in the mapper for better clarity.

Answer 3

Answer №2

When it comes to addressing your query, there are various approaches that can be taken. If you're specifically seeking a robust solution for the current issue of mapping values, one option is to either create an object mapper as suggested in other responses or simply develop a straightforward function to format your string in a certain way.

var example = "AWAITING_SHIPMENT";
example = example.toLowerCase()
    .split('_')
    .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
    .join(' ');
console.log(example);

However, if you wish to explore this topic from a broader perspective, employing dynamic dispatch through polymorphism could be advantageous. Here's an illustration demonstrating how polymorphism can alter behavior based on type.

Answer 4

When it comes to addressing your query, there are various approaches that can be taken. If you're specifically seeking a robust solution for the current issue of mapping values, one option is to either create an object mapper as suggested in other responses or simply develop a straightforward function to format your string in a certain way.

var example = "AWAITING_SHIPMENT";
example = example.toLowerCase()
    .split('_')
    .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
    .join(' ');
console.log(example);

However, if you wish to explore this topic from a broader perspective, employing dynamic dispatch through polymorphism could be advantageous. Here's an illustration demonstrating how polymorphism can alter behavior based on type.

Answer 5

Answer №3

My approach involves splitting the status string using underscores and then capitalizing each word before returning a new formatted status as per specifications.

// Sample Data

const data = {
  shippingStatus: "AWAITING_SHIPMENT"
}

// Updated Solution

if(data.shippingStatus){
  const { shippingStatus } = data;
  
  const status = 
  shippingStatus.split('_') 
  .map(string => string.charAt(0).toUpperCase() + string.slice(1).toLowerCase())
  .join(" ");
  
  console.log(status)
  
  // Avoid redundant checks by directly processing the status within the if condition
  // For example: resData.push(setDate(status))
  
}

Answer 6

My approach involves splitting the status string using underscores and then capitalizing each word before returning a new formatted status as per specifications.

// Sample Data

const data = {
  shippingStatus: "AWAITING_SHIPMENT"
}

// Updated Solution

if(data.shippingStatus){
  const { shippingStatus } = data;
  
  const status = 
  shippingStatus.split('_') 
  .map(string => string.charAt(0).toUpperCase() + string.slice(1).toLowerCase())
  .join(" ");
  
  console.log(status)
  
  // Avoid redundant checks by directly processing the status within the if condition
  // For example: resData.push(setDate(status))
  
}

Answer 7

Answer №4

Creating a map to define possible statuses:

let orderStatuses = {
   'AWAITING_SHIPMENT': 'Awaiting Shipment',
   'SHIPPED': 'Shipped',
   ...
};

responseData.push(setData(order.shippingStatus ? orderStatuses[shippingStatus] : ""));

Answer 8

Creating a map to define possible statuses:

let orderStatuses = {
   'AWAITING_SHIPMENT': 'Awaiting Shipment',
   'SHIPPED': 'Shipped',
   ...
};

responseData.push(setData(order.shippingStatus ? orderStatuses[shippingStatus] : ""));

Maximizing conditional evaluation in typescript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Accessing information from an Angular Elements Web Component using vanilla JavaScript

Adjustable <a> component

retrieve data from the API response using a node request

Guide on effectively converting a table of tuples to an array of objects utility function (similar to zip) while preventing the merging of all values in typescript version 5.2.2

Is there a way to update the state for a specific location on a map?

What is the best way to convert line breaks within a textarea to use <br/> instead?

Harness the Power of Asynchronous Binding in Knockout.js

Learn the steps for retrieving master page properties within an aspx page

What is the proper syntax for specifying a specific field in a generic class?

Ensure that the value is updated upon clicking on the radio buttons and store the value in a session variable for

Techniques for transferring child properties and values to parent components upon the screen being initialized

Angular's Spanning Powers

What is the best way to manage a file upload process?

The jsx file is not being parsed by Webpack

When using Router.push() in next.js, the error TypeError: products.map is not a function may arise

Tips for utilizing console log within a react form component

Tips for adjusting the height of an iframe to ensure that all content is responsive and contained within a div set to 40% height

"Enhancing Angular 2 with a robust HTTP retry system

What are the steps to turn off unwanted autocomplete suggestions in VS Code?

Utilizing Javascript to extract information from JSON