JavaScript: Organizing values based on their case sensitivity

Question

JavaScript: Organizing values based on their case sensitivity

Imagine a scenario where we have models ABC23x, ABC23X & abc23X all referring to the same model. These model names are retrieved from API endpoints.

Now the UI has two tasks:

Display only one model name (ABC23X)
When calling the REST API, we need to send all possible values ([ABC23x, ABC23X, abc23X])

I am seeking assistance in implementing this feature. I attempted using MAP but it did not work as expected.

let models = ['tc75X', 'TC75X', 'tc75x', 'TC75x', 'TC76x', 'TC77Y'];
let mappedModels = new Map(models.map(s => [s.toUpperCase(), s]));

console.log(mappedModels);

Here is the fiddle

I am using Angular 6. Any assistance or suggestions would be greatly appreciated.

javascript angular typescript user-interface

Answer 1

Answer №1

The problem you're facing is that each new key is replacing the old one. Here's a breakdown of what's happening:

When you get 'tc75X', it becomes the key 'TC75X' and gets added to the Map as 'TC75X' -> ['tc75X']
Then, when you get 'TC75X', it also becomes the key 'TC75X' and gets added to the Map as 'TC75X' -> ['TC75X']

As a result, you end up with only one value instead of two.

Instead of overwriting keys, you should group them together like this:

If the current model key doesn't exist in the Map yet, add it.
Include the current value under the corresponding key in the Map.

let models = ['tc75X', 'TC75X', 'tc75x', 'TC75x', 'TC76x', 'TC77Y'];

let mappedModels = models.reduce((map, modelName) => {
  const normalisedKey = modelName.toUpperCase();
  
  //1. Add entry if not present
  if (!map.has(normalisedKey)) {
    map.set(normalisedKey, []); 
  }
  
  //2. Add to entry for this key
  map.get(normalisedKey).push(modelName);
  
  return map;
}, new Map());

for(let [key, value] of mappedModels) {
  console.log(key, "->", value);
}

Answer 2

The problem you're facing is that each new key is replacing the old one. Here's a breakdown of what's happening:

When you get 'tc75X', it becomes the key 'TC75X' and gets added to the Map as 'TC75X' -> ['tc75X']
Then, when you get 'TC75X', it also becomes the key 'TC75X' and gets added to the Map as 'TC75X' -> ['TC75X']

As a result, you end up with only one value instead of two.

Instead of overwriting keys, you should group them together like this:

If the current model key doesn't exist in the Map yet, add it.
Include the current value under the corresponding key in the Map.

let models = ['tc75X', 'TC75X', 'tc75x', 'TC75x', 'TC76x', 'TC77Y'];

let mappedModels = models.reduce((map, modelName) => {
  const normalisedKey = modelName.toUpperCase();
  
  //1. Add entry if not present
  if (!map.has(normalisedKey)) {
    map.set(normalisedKey, []); 
  }
  
  //2. Add to entry for this key
  map.get(normalisedKey).push(modelName);
  
  return map;
}, new Map());

for(let [key, value] of mappedModels) {
  console.log(key, "->", value);
}

Answer 3

Answer №2

An example of how this can be approached is provided below. Initially, a key is created followed by the creation of a new array if the key does not already exist in the map. Subsequently, the value is assigned to the new array.

const devices = ['iPhone X', 'iphone x', 'IPHONE X', 'ipad pro', 'iPad Pro'];
const mappedDevices = new Map();

for (const device of devices) {
  const key = device.toUpperCase();
  let set = mappedDevices.get(key);

  if (!set) {
    set = [];
  }

  set.push(device);
  mappedDevices.set(key, set);
}

console.log(mappedDevices);

Answer 4

An example of how this can be approached is provided below. Initially, a key is created followed by the creation of a new array if the key does not already exist in the map. Subsequently, the value is assigned to the new array.

const devices = ['iPhone X', 'iphone x', 'IPHONE X', 'ipad pro', 'iPad Pro'];
const mappedDevices = new Map();

for (const device of devices) {
  const key = device.toUpperCase();
  let set = mappedDevices.get(key);

  if (!set) {
    set = [];
  }

  set.push(device);
  mappedDevices.set(key, set);
}

console.log(mappedDevices);

Answer 5

Answer №3

If you want to store your models in a unique way, you can use an object for that purpose. Each key in the object represents the uppercase version of a model, and the corresponding value is an array containing all versions of the model with different casings.

const models = ['tc75X', 'TC75X', 'tc75x', 'TC75x', 'TC76x', 'TC77Y'];

const modelMap = models.reduce((result, currentModel) => {
  const uppercasedModel = currentModel.toUpperCase();
  
  if (!result[uppercasedModel]) {
    result[uppercasedModel] = [currentModel];
  } else {
    result[uppercasedModel].push(currentModel);
  }
  
  return result;
}, {});

console.log(modelMap);

Answer 6

If you want to store your models in a unique way, you can use an object for that purpose. Each key in the object represents the uppercase version of a model, and the corresponding value is an array containing all versions of the model with different casings.

const models = ['tc75X', 'TC75X', 'tc75x', 'TC75x', 'TC76x', 'TC77Y'];

const modelMap = models.reduce((result, currentModel) => {
  const uppercasedModel = currentModel.toUpperCase();
  
  if (!result[uppercasedModel]) {
    result[uppercasedModel] = [currentModel];
  } else {
    result[uppercasedModel].push(currentModel);
  }
  
  return result;
}, {});

console.log(modelMap);

Answer 7

Answer №4

let carModels = ['tc75X', 'TC75X', 'tc75x', 'TC75x', 'TC76x', 'TC77Y'];

let mappedCarModels = carModels.reduce((acc, model) =>{
    let upperModel = model.toUpperCase(); 
acc[upperModel] = acc[upperModel] || [];
acc[upperModel].push(model);
return acc
}, {});

for (let [key, value] of Object.entries(mappedCarModels)) {
  console.log(`${key}: ${value}`);
}

This code snippet demonstrates the use of the reduce method to organize and map car models based on their uppercase versions.

Answer 8

let carModels = ['tc75X', 'TC75X', 'tc75x', 'TC75x', 'TC76x', 'TC77Y'];

let mappedCarModels = carModels.reduce((acc, model) =>{
    let upperModel = model.toUpperCase(); 
acc[upperModel] = acc[upperModel] || [];
acc[upperModel].push(model);
return acc
}, {});

for (let [key, value] of Object.entries(mappedCarModels)) {
  console.log(`${key}: ${value}`);
}

This code snippet demonstrates the use of the reduce method to organize and map car models based on their uppercase versions.

JavaScript: Organizing values based on their case sensitivity

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Establishing a path for a post request in a Node.js application

Using the Vue.js Spread Operator in place of Vue.set or Vue.delete

Creating an array of JSX elements or HTMLElements in a React TypeScript rendering

"Implementing Scrollify.js to dynamically add a class to the current section

Is the Vue-portal enabled conditionally?

Two-way data bindings trigger the digest() function to iterate 10 times

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Ways to present a Nuxt page as a reply from an express route

Leveraging jQuery for handling button functionality and making asynchronous requests

Sending a PHP string formatted as JSON to be processed by jQuery

Is there a method to obtain the image path in a similar manner to item.src?

Ways to transmit additional arguments to RxJS map function

Managing status in Angular applications

Exploring the resolution of unit test for an Angular Bootstrap modal using the John Papa ViewModel style

"Vue3 offers the ability to return a multi-layer object through the Provide-Inject

Having trouble configuring the sticky-footer correctly

Using HTML to design interactive buttons that can send API requests and display their current status

I am currently experiencing difficulties with react-navigation as I am unable to successfully pass a parameter through a nested navigation stack

Encountered an unexpected forward slash while trying to parse JSON using

Issues arise during the deployment of Angular7 production build when passing through the Bitbucket package manager