What is the best way to retrieve a specific key from a JavaScript Map containing an array?

Question

What is the best way to retrieve a specific key from a JavaScript Map containing an array?

I am currently iterating through a two-dimensional array to populate a map. The map is using the [i,j] indices as keys and the corresponding arr[i][j] values as values:

const arrMap = new Map()

for(let i = 0; i < arr.length; i++){
        for(let j = 0; j < arr[i].length; j++){
            arrMap.set([i,j],arr[i][j]);
        }
    }

After logging the Map, it appears to have been set correctly with pairs like: [0,0] => "A". However, when I try to retrieve the value using: arrMap.get([0,0]), it returns undefined. How can I access the value "A" from arrMap?

An example array I would iterate through is:

[ ["A","B","B"],["A","A","A"] ]

There is a similar question discussed here- Array as a javascript map's key?, but the answer provided did not clarify the issue for me.

javascript arrays es6-map

Answer 1

Answer №1

Upon careful examination of the response to the previous question, it becomes evident that your attempt to retrieve the array [0,0] is flawed as it is not the same array [0,0] that was originally set. One solution could involve converting the array key into a string. Here's an example:

const arrMap = new Map();
const arr = [
  [1, 2, 3],
  [4, 5, 6]
];

for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr[i].length; j++) {
    arrMap.set(JSON.stringify([i, j]), arr[i][j]);
  }
}
console.log(arrMap.get(JSON.stringify([1, 1]))); // 5

Answer 2

Upon careful examination of the response to the previous question, it becomes evident that your attempt to retrieve the array [0,0] is flawed as it is not the same array [0,0] that was originally set. One solution could involve converting the array key into a string. Here's an example:

const arrMap = new Map();
const arr = [
  [1, 2, 3],
  [4, 5, 6]
];

for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr[i].length; j++) {
    arrMap.set(JSON.stringify([i, j]), arr[i][j]);
  }
}
console.log(arrMap.get(JSON.stringify([1, 1]))); // 5

Answer 3

Answer №2

When dealing with objects and their unique references, a wrapper is necessary to effectively store and retrieve values.

This wrapper generates a primitive value (string) independent of object references.

const
    wrapperFunction = array => array.join('|'),
    arrayInput = [["A", "B", "B"], ["A", "A", "A"]],
    arrayMap = new Map();

for (let i = 0; i < arrayInput.length; i++) {
    for (let j = 0; j < arrayInput[i].length; j++) {
        arrayMap.set(wrapperFunction([i, j]), arrayInput[i][j]);
    }
}

console.log(arrayMap.get(wrapperFunction([0, 0]))); // A

Answer 4

When dealing with objects and their unique references, a wrapper is necessary to effectively store and retrieve values.

This wrapper generates a primitive value (string) independent of object references.

const
    wrapperFunction = array => array.join('|'),
    arrayInput = [["A", "B", "B"], ["A", "A", "A"]],
    arrayMap = new Map();

for (let i = 0; i < arrayInput.length; i++) {
    for (let j = 0; j < arrayInput[i].length; j++) {
        arrayMap.set(wrapperFunction([i, j]), arrayInput[i][j]);
    }
}

console.log(arrayMap.get(wrapperFunction([0, 0]))); // A

Answer 5

Answer №3

transform key into a string data type

arrMap.set([x,y].toString(),arr[x][y]);

you can loop through to retrieve the key and its corresponding value

 for(let [key, value] of arrMap){
     console.log(key)
     console.log(value)
    }

if you need direct access

arrMap.get('2,1')

Answer 6

transform key into a string data type

arrMap.set([x,y].toString(),arr[x][y]);

you can loop through to retrieve the key and its corresponding value

 for(let [key, value] of arrMap){
     console.log(key)
     console.log(value)
    }

if you need direct access

arrMap.get('2,1')

Answer 7

Answer №4

When working with a key like [0, 0], it's important to remember that it is a reference type. This means that each time you write the same array, you are creating a new reference. This is why when using a Map, which does not have the same reference mechanism, you may encounter the issue of getting undefined. To avoid this, consider using a primitive type as a key instead.

To see all keys within your Map data structure, you can utilize the keys() method and then access the desired key accordingly:

Using a primitive value as a key is recommended because each time a value is accessed by declaring an array, a new reference is created. As a result, the key in your Map object may not match the new reference:

const arrMap = new Map()

let arr = [[1, 2, 3], [4, 5, 6], [7]]

for(let i = 0; i < arr.length; i++){
        for(let j = 0; j < arr[i].length; j++){
            arrMap.set(`${i}, ${j}`,arr[i][j]);
        }
}

for (let key of arrMap.keys()) {
  console.log(`key: `, key);
  console.log(`result: `, arrMap.get(key));
}

let result = arrMap.get('0, 0');
console.log('The value by key of primitive type: ', result);

Answer 8

When working with a key like [0, 0], it's important to remember that it is a reference type. This means that each time you write the same array, you are creating a new reference. This is why when using a Map, which does not have the same reference mechanism, you may encounter the issue of getting undefined. To avoid this, consider using a primitive type as a key instead.

To see all keys within your Map data structure, you can utilize the keys() method and then access the desired key accordingly:

Using a primitive value as a key is recommended because each time a value is accessed by declaring an array, a new reference is created. As a result, the key in your Map object may not match the new reference:

const arrMap = new Map()

let arr = [[1, 2, 3], [4, 5, 6], [7]]

for(let i = 0; i < arr.length; i++){
        for(let j = 0; j < arr[i].length; j++){
            arrMap.set(`${i}, ${j}`,arr[i][j]);
        }
}

for (let key of arrMap.keys()) {
  console.log(`key: `, key);
  console.log(`result: `, arrMap.get(key));
}

let result = arrMap.get('0, 0');
console.log('The value by key of primitive type: ', result);

Answer 9

Answer №5

The key in a Map needs to be the actual key of the array in order to be retrieved correctly. This means if you want to use an array as a key, it must be the same array object that was originally set as the key.

Here's an example to help illustrate:

const map = new Map()
map.set([0, 0], 'A')

const keyZ = [2, 2]
map.set(keyZ, 'Z')

console.log(map.get([0, 0])) // won't find
console.log(map.get(keyZ)) // will output Z

const keyA = [0, 0]
map.set(keyA, 'A')
console.log(map.get(keyA)) // will output A

Answer 10

The key in a Map needs to be the actual key of the array in order to be retrieved correctly. This means if you want to use an array as a key, it must be the same array object that was originally set as the key.

Here's an example to help illustrate:

const map = new Map()
map.set([0, 0], 'A')

const keyZ = [2, 2]
map.set(keyZ, 'Z')

console.log(map.get([0, 0])) // won't find
console.log(map.get(keyZ)) // will output Z

const keyA = [0, 0]
map.set(keyA, 'A')
console.log(map.get(keyA)) // will output A

What is the best way to retrieve a specific key from a JavaScript Map containing an array?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

JavaScript Time and Date Formatting

What is the best way to check for incorrect or missing values when comparing two Arrays?

jQuery element with listener not triggering as expected

Generating Vuetify badges and icons with createElement in the render function: A step-by-step guide

Developing an npm library with ReactJs: A step-by-step guide

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

Issues with JQuery Ajax rendering in browser (suspected)

AngularJS - Shared service object mistakenly removed in error

Encountering issues when attempting to install vue-cli on a new project

multiples of order quantities in WooCommerce

Can you save data entered by a user into a text file using JavaScript or a similar technology in HTML, without the need to send it to a server?

Regular pattern with Kubernetes cluster endpoint utilizing either IP address or fully qualified domain name

Automatically hide a label after a certain amount of time following a button click

Illustrating SVG links

Is there a way to retrieve the ngModel reference of a child element within a directive's

PHP: iterating through an object

How can I determine if a URL in react js includes a specific string?

Using jasmine for mocking jQuery's getJSON callback function is a helpful technique in testing your

The onClick event handler fails to trigger in React

A detailed guide on sending Joomla form information to a controller function using Ajax communication