score:0

Full Demo (also below): https://codepen.io/Alexander9111/pen/YzXNGyZ)

A step-by-step explanation is at the bottom of this answer

const states = [
  ['Arizona', 'AZ'],
  ['Alabama', 'AL'],
  ['Alaska', 'AK'],
  ['Arkansas', 'AR'],
  ['California', 'CA']
];

const statesReversed = states.map((child, index) =>{
  return [...child.reverse()]
});

console.log(statesReversed);
const statesConversionObject = Object.fromEntries(statesReversed);
console.log(statesConversionObject);

const statesData = {
  'AZ': ['Some', 'Data'],
  'AL': ['Some', 'Data'],
  'AK': ['Some', 'Data'],
  'AR': ['Some', 'Data'],
  'CA': ['Some', 'Data']
};

const statesDataModified = {};

for (let key in statesData){
  const newKey = statesConversionObject[key];
  statesDataModified[newKey] = statesData[key];
}

console.log(statesDataModified);
const statesFullData = d3.map(statesDataModified);
console.log(statesFullData);

enter image description here

enter image description here

Step by Step:

Original Data:

const states = [
  ['Arizona', 'AZ'],
  ['Alabama', 'AL'],
  ['Alaska', 'AK'],
  ['Arkansas', 'AR'],
  ['California', 'CA']
];

const statesData = {
  'AZ': ['Some', 'Data'],
  'AL': ['Some', 'Data'],
  'AK': ['Some', 'Data'],
  'AR': ['Some', 'Data'],
  'CA': ['Some', 'Data']
};
  1. Reverse our array of arrays (might be called array of touples in other languages). We do the reversing by using array.map() to iterate over the outer array and [...child.reverse()] to reverse the inner array:

    const statesReversed = [
      ['AZ', 'Arizona',],
      ['AL', 'Alabama'],
      ['AK', 'Alaska'],
      ['AR', 'Arkansas'],
      ['CA', 'California']
    ];
    
  2. Then we can take this and use it to create a javascript object (/hash table) using Object.fromEntries(statesReversed) so that we can use this to essentially "lookup" abbreviations and return full names. We do this using:

    const statesConversionObject = Object.fromEntries(statesReversed);
    //which gives us:
    statesConversionObject = {
      AK: "Alaska",
      AL: "Alabama",
      AR: "Arkansas",
      AZ: "Arizona",
      CA: "California"
    }
    
  3. This allows us to do this lookup like so:

    const statesDataModified = {};
    
    for (let key in statesData){
      const newKey = statesConversionObject[key];
      statesDataModified[newKey] = statesData[key];
    }
    
  4. We get in return:

    statesDataModified = {
      'Arizona': ['Some', 'Data'],
      'Alabama': ['Some', 'Data'],
      'Alaska': ['Some', 'Data'],
      'Arkansas': ['Some', 'Data'],
      'California': ['Some', 'Data']
    };
    
  5. Finally, convert to d3.map():

    const statesFullData = d3.map(statesDataModified);
    

score:0

You can easily create a new Map object used for mapping states' abbreviations to their full names by passing a new copy of your states array to the Map constructor having keys and values reversed:

const statesMap = new Map(states.map(([name, abbr]) => [abbr, name]));

This acts as helper to resolve states' names when subsequently creating the new statesFullData map from the statesData map:

const statesFullData = new Map(                    // Create new map (full names-to-data) from...
  Array.from(                                      // ...array...
    statesData,                                    // ...from previous map (abbr-to-data)...
    ([abbr, data]) => [statesMap.get(abbr), data]  // ...keys resolved to full name by abbreviation.
  )
);

Have a look at the following snippet for a working demo:

const states = [
  ['Arizona', 'AZ'],
  ['Alabama', 'AL'],
  ['Alaska', 'AK'],
  ['Arkansas', 'AR'],
  ['California', 'CA'],
];

const statesData = new Map([
  ['AZ', "AZ data"],
  ['AL', "AL data"],
  ['AK', "AK data"],
  ['AR', "AR data"],
  ['CA', "CA data"],
]);

const statesMap = new Map(states.map(([name, abbr]) => [abbr, name]));

const statesFullData = new Map(
  Array.from(
    statesData,
    ([abbr, data]) => [statesMap.get(abbr), data]
  )
);

console.log(...statesFullData);


Related Query