A simple method in JavaScript/TypeScript for converting abbreviations of strings into user-friendly versions for display

Question

A simple method in JavaScript/TypeScript for converting abbreviations of strings into user-friendly versions for display

Let's say I am receiving data from my backend which can be one of the following:

A,
B,
C,
D

Although there are actually 20 letters that could be received, and I always know it will be one of these specific letters. For example, I would like to map A to display as Alfa, and B should display as Beta. Is there a more efficient way to do this without creating a large switch statement?

I attempted using a constant like this:

export const Test = {
  SWE: 'Sweden',
  DK: 'Denmark'
}

And then trying to access it using:

Test[countrycode]

However, this causes an error stating

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ SWE: string; DK: string;

The reason quotes are missing around the keys is due to prettier formatting requirements.

javascript typescript

Answer 1

Answer №1

Below are the necessary steps to resolve this issue.

Create an interface specifically for the mapping variable to avoid encountering the Element is implicitly any... error in TypeScript
Specify the type after your variable using a colon (:)

interface CountryMapping = {
   [key: string]: string  // This means that as long as the key is a string, it is valid for the key. Therefore, there's no need to manually specify every country code within the interface
}

export const countries: CountryMapping = {
  "SWE": "Sweden",
  "DK": "Denmark", 
  ...
}

// Example of how to use this mapping
const response = // Data received from the backend, where 'response' represents the letter

console.log(countries[response])

Answer 2

Below are the necessary steps to resolve this issue.

Create an interface specifically for the mapping variable to avoid encountering the Element is implicitly any... error in TypeScript
Specify the type after your variable using a colon (:)

interface CountryMapping = {
   [key: string]: string  // This means that as long as the key is a string, it is valid for the key. Therefore, there's no need to manually specify every country code within the interface
}

export const countries: CountryMapping = {
  "SWE": "Sweden",
  "DK": "Denmark", 
  ...
}

// Example of how to use this mapping
const response = // Data received from the backend, where 'response' represents the letter

console.log(countries[response])

Answer 3

Answer №2

To retrieve specific values, all you need to do is create a mapping of the values you want and then loop through to get those desired values.

const mapValues = {
  'x': 'X-ray',
  'y': 'Yogurt',
  'z': 'Zebra'
}

const inputValues = ['x', 'y', 'v', 'z']

const mappedResults = inputValues.map(value => mapValues[value] || value);

console.log(mappedResults);

Answer 4

To retrieve specific values, all you need to do is create a mapping of the values you want and then loop through to get those desired values.

const mapValues = {
  'x': 'X-ray',
  'y': 'Yogurt',
  'z': 'Zebra'
}

const inputValues = ['x', 'y', 'v', 'z']

const mappedResults = inputValues.map(value => mapValues[value] || value);

console.log(mappedResults);

Answer 5

Answer №3

//let characterFromDatabase = "A";
let letterMap = {"A":"Alfa", "B": "Beta"};
return letterMap[characterFromDatabase] || characterFromDatabase;

//improved for case insensitivity
let letterMap = {"a":"Alfa", "b": "Beta"};
return letterMap[characterFromDatabase.toLowerCase()] || characterFromDatabase;

Answer 6

//let characterFromDatabase = "A";
let letterMap = {"A":"Alfa", "B": "Beta"};
return letterMap[characterFromDatabase] || characterFromDatabase;

//improved for case insensitivity
let letterMap = {"a":"Alfa", "b": "Beta"};
return letterMap[characterFromDatabase.toLowerCase()] || characterFromDatabase;

A simple method in JavaScript/TypeScript for converting abbreviations of strings into user-friendly versions for display

Answer №1

Answer №2

Answer №3

Similar questions

Ways to showcase Material-UI Grid components without using cards

Choose JSON information and modify it utilizing NODE.js with identical data

Wrapper around union function in TypeScript with generics

Is it possible to use ref in React to reference various elements based on specific actions?

It appears that the home page of next.js is not appearing properly in the Storybook

Switching between Custom tooltips and default tooltips in Chart.js and Angular

The integration of Angular and Node API within the IISNode directory structure is experiencing functionality issues

Tips for arranging information in ng-repeat using nested objects within JSON data on AngularJS

Is there a way to switch the eventHandler assigned to a particular input element dynamically?

You need to provide 1 type argument(s) for the Generic type ModuleWithProviders<T> in Angular 10 Swagger Codegen

Preventing Event Loop Blocking in Node.js: The Key to Streamlining Performance

Include additional data in the FormData object before sending it over AJAX requests

Chrome's rendering of CSS flex display shows variations with identical flex items

How do I select the first element with class "cell" in D3, similar to jQuery's $(".cell:first")?

Express encountered an unexpected error when attempting to navigate to the client directory

What could be the reason for the inability to install Angular JS 2?

Utilizing key values to access an array and generate a list of items in React.js

Placing a new item following each occurrence of 'X' in React components

A nifty little JavaScript tool

Choose an XPath selector that targets a list item within a specific div element