Create an array mapping of locations and convert each location to its corresponding language

Question

Create an array mapping of locations and convert each location to its corresponding language

With Next.js, I have successfully retrieved the current locale and all available locales for a language selection menu:

const {currentLocale, availableLocales} = useContext(LangContext);
// currentLocale = "en-US"
// availableLocales = ["en-US", "de-DE"]

To facilitate the display of the full language name, I created this function:

const getLocaleDisplayName = ()=> {
    if (currentLocale === "en-US") { return "English" };
    if (currentLocale === "de-DE") { return "Deutsch" };
}

Now, I aim to transform availableLocales from

["en-US", "de-DE"]

to

["English", "Deutsch"]

. This not only enhances the visual appeal but also simplifies the language selection process for users. What would be the most effective approach to achieve this?

javascript next.js internationalization

Answer 1

Answer №1

What do you think about using an object?

const languageAlias = {
  "en-US": "English",
  "de-DE": "German"
}
//...
anotherList.map(item => languageAlias[item])

Answer 2

What do you think about using an object?

const languageAlias = {
  "en-US": "English",
  "de-DE": "German"
}
//...
anotherList.map(item => languageAlias[item])

Answer 3

Answer №2

If you want to create a new array without modifying the original one, you can utilize the Array.from method.

Make sure to pass arguments to the clAlias() function like this: clAlias(cl)

const originalArray = ["en-US", "de-DE"];
const clAlias = (language) => {
  if (language === "en-US") {
    return "English";
  }
  if (language === "de-DE") {
    return "Deutsch";
  }
};

const newArray = Array.from(originalArray, (element) => clAlias(element));
console.log(newArray);

Answer 4

If you want to create a new array without modifying the original one, you can utilize the Array.from method.

Make sure to pass arguments to the clAlias() function like this: clAlias(cl)

const originalArray = ["en-US", "de-DE"];
const clAlias = (language) => {
  if (language === "en-US") {
    return "English";
  }
  if (language === "de-DE") {
    return "Deutsch";
  }
};

const newArray = Array.from(originalArray, (element) => clAlias(element));
console.log(newArray);

Create an array mapping of locations and convert each location to its corresponding language

Answer №1

Answer №2

Similar questions

Ways to showcase a website within an HTML document using a URL?

Apply a specific image layout once the drop event occurs

Choosing a default selection in a nested v-for loop for a select box

The error message "TypeError: addNewUser is not a function in React.js onSubmit

Is it possible to generate multiple services from a single factory in Angular?

JavaScript compilation failure: Unhandled SyntaxError: Unforeseen token '>' in string variable within an if statement -- Snowflake

Receive a notification for failed login attempts using Spring Boot and JavaScript

Is it possible to restart an animated value in React Native?

Manipulate HTML content from JSON data in JavaScript without using jQuery

Returning data to be displayed in Jade templates, leveraging Express and Node.js

Tips on modifying the interface based on the selected entry using jQuery

After ReactDOM is used, the JavaScript code is no longer functioning properly

What are the steps to incorporate dynamic routing within Next.js?

In my experience, I have encountered issues with certain routes not functioning properly within Express

trouble with fetching data

Challenges in using Three.js on mobile devices with orientation capabilities

Cleaning out input fields in React applications

I am looking to dynamically load a script only after retrieving specific data from a JSON file in Next.js

Storing HTML elements in a database using jQuery's html() method

Determine the width of two inline input fields