Creating a visual representation from an array of strings to produce a

Question

Creating a visual representation from an array of strings to produce a

My goal is to organize a list of server names into a map using a specific logic.

For instance, with names like:

"temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2"

They would be mapped as:

{
  a: [
    "temp-a-name1",
    "temp-a-name2"
  ],
  b: [
    "temp-b-name1",
    "temp-b-name2"
  ]
}

The key will always be the first letter after the dash "-".

Although my JavaScript knowledge is limited, I have achieved this by taking a simple approach. However, I am curious if there is a more efficient and typical JavaScript way to accomplish this task.

const servers = ["temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2"];

let map = {};
let key;
for (const server of servers) {
  key = server.charAt(server.indexOf("-") + 1);
  if (key in map) {
    map[key].push(server);
  } else {
    map[key] = [server];
  }
}

javascript string

Answer 1

Answer №1

To achieve this task, one can utilize the reduce() method as shown below:

let servers = ["temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2"];

let map = servers.reduce((acc, server) => {
  let key = server.charAt(server.indexOf("-") + 1);

  if (acc[key])
    acc[key].push(server);
   else
    acc[key] = [server];
    
  return acc;
}, {})

console.log(map)

Answer 2

To achieve this task, one can utilize the reduce() method as shown below:

let servers = ["temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2"];

let map = servers.reduce((acc, server) => {
  let key = server.charAt(server.indexOf("-") + 1);

  if (acc[key])
    acc[key].push(server);
   else
    acc[key] = [server];
    
  return acc;
}, {})

console.log(map)

Answer 3

Answer №2

Give this a shot:

const servers = ["temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2"];
const result = servers.reduce((acc, cur) => ({
    ...acc,
  [cur.split('-')[1]]: (acc[cur.split('-')[1]] || []).concat([cur]),
}), {})
console.log(result);

This qualifies as being quite "javascripty," don't you think?

Answer 4

Give this a shot:

const servers = ["temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2"];
const result = servers.reduce((acc, cur) => ({
    ...acc,
  [cur.split('-')[1]]: (acc[cur.split('-')[1]] || []).concat([cur]),
}), {})
console.log(result);

This qualifies as being quite "javascripty," don't you think?

Answer 5

Answer №3

To retrieve the key, I would utilize the reduce method. One way to extract the key could involve using .split('-')[1].

const items = ['temp-a-item1', 'temp-a-item2', 'temp-b-item1', 'temp-b-item2'];
const dictionary = items.reduce((dictionary, item) => {
  const key = item.split('-')[1];
  const itemsWithKey = dictionary[key] || [];

  return { ...dictionary, [key]: [...itemsWithKey, name] };
}, {});

console.log(dictionary);

Answer 6

To retrieve the key, I would utilize the reduce method. One way to extract the key could involve using .split('-')[1].

const items = ['temp-a-item1', 'temp-a-item2', 'temp-b-item1', 'temp-b-item2'];
const dictionary = items.reduce((dictionary, item) => {
  const key = item.split('-')[1];
  const itemsWithKey = dictionary[key] || [];

  return { ...dictionary, [key]: [...itemsWithKey, name] };
}, {});

console.log(dictionary);

Answer 7

Answer №4

To implement a similar concept using the new Map data structure, you can follow this example:

const servers = ["temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2"];

const map = new Map();

servers.forEach(item => {
  const key = item.split('-')[1];
  const value = map.get(key) || [];
  value.push(item);
  
  map.set(key, value);
});

// OUTPUT TO CONSOLE
for (var [key, value] of map.entries()) {
  console.log(key + ' = ' + value);
}

Answer 8

To implement a similar concept using the new Map data structure, you can follow this example:

const servers = ["temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2"];

const map = new Map();

servers.forEach(item => {
  const key = item.split('-')[1];
  const value = map.get(key) || [];
  value.push(item);
  
  map.set(key, value);
});

// OUTPUT TO CONSOLE
for (var [key, value] of map.entries()) {
  console.log(key + ' = ' + value);
}

Creating a visual representation from an array of strings to produce a

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide: Highlighting a selected link in Navigation without redirecting the page can be achieved in AngularJS by utilizing

Manipulating a global variable in VueJS

My SF2 app is experiencing issues with AngularJS integration

The function is not being executed when using $scope.$apply()

Remove a particular item by clicking on the icon in React.js

Tips for enhancing the fluidity of animations after removing an item from a list

Warning: An unhandled promise error occurred due to a validation error

Attempting to conceal a div element along with its contents using AngularJS

Developing a web service that can receive XML data in string format

Color Your Plone Website with a Custom JavaScript Colorscheme

The reason why Express is not directing to the static React build files is due to the absence of a specific URL slug

Steps to refresh a .ejs page with updated information following an ajax request

Decoding a formatted string

Disable the click event using jQuery

What is the way to create the appearance of a hand or arrow hovering over my "X" while I am closing out my Div using jQuery?

Populate the dropdown menu with data from a JSON file

Refreshing ng-model within a radio input

Tips on integrating Codrops tutorial codes into a SilverStripe website project

Changing a button's text in Vue.js when holding a keyboard modifier - how to do it!

Creating a single loop in Javascript to populate two dropdown menus with options