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 adjust the text size in jqGrid?

I'm at a loss with this useState error, can't seem to figure

Angular version 7.2.1 encounters an ES6 class ReferenceError when attempting to access 'X' before it has been initialized

Only initiate the loading of the iframe within the div upon clicking a specific element

Use `$$state: {…}` within the request rather than the data

Determine whether the elements in the master array match the elements in the child array

Discovering the power of ng-change in an Angular typeahead search functionality

Transmit an Array using Ajax and retrieve it on an ASP Classic page

Is there a way to identify the browser version that is being used?

Is there a one-liner to efficiently eliminate all instances of a specific sub-string from an array using the filter

Moving object sideways in 100px intervals

Can you explain the distinction between employing 'from' and 'of' in switchMap?

How can I use jQuery to separate special characters from letters in a string?

"There is an issue with the payload size: request entity is too large. What is the solution for handling this in Nest

Check domains using Jquery, AJAX, and PHP

Comparison Between React-Redux mapStateToProps and Inheriting Props from ParentsIn the

What is the best way to incorporate material-ui icons into my project?

Hide bootstrap card on smaller screens such as sm and md

Navigating JSON Data in Groovy Using a Loop: A Handy Guide

Ways to retrieve form information from a POST request