Object.entries with forEach to map array of objects returns undefined except when console.log is used

Question

I have an array of objects that have key value pairs, I want to find a specific key in each object and return the value.

A sample of the Array:

filterCounties=[
  {
    "StateName": "Delaware",
    "CountyName": "Kent",
    "FIPS": 10001,
    "Eligibles_2017": 33292,
    "Eligibles_2018": 34938,
    "Penetration_2017": 0.107,
    "Penetration_2018": 0.123
  },
  {
    "StateName": "Delaware",
    "CountyName": "New Castle",
    "FIPS": 10003,
    "Eligibles_2017": 94030,
    "Eligibles_2018": 98080,
    "Penetration_2017": 0.128,
    "Penetration_2018": 0.164
  },
  {
    "StateName": "Delaware",
    "CountyName": "Sussex",
    "FIPS": 10005,
    "Eligibles_2017": 61964,
    "Eligibles_2018": 65990,
    "Penetration_2017": 0.082,
    "Penetration_2018": 0.097
  },
  {
    "StateName": "Delaware",
    "CountyName": "Pending County Designation",
    "FIPS": 10,
    "Eligibles_2017": 9,
    "Eligibles_2018": 0,
    "Penetration_2017": 0,
    "Penetration_2018": 0
  }
]

The key I am looking for is Penetration_2018 - I can use the following code and output the values using console.log

const mapTest = new Map(
      Object.entries(filterCounties).forEach(([key, value]) =>
        console.log((key, value["Penetration_2018"]))
      )
    );

This will output the values: console.log output

However if I assign to a variable and then log the variable

 const mapTest = new Map(
      Object.entries(filterCounties).forEach(
        ([key, value]) => (key, value["Penetration_2018"])
      )
    );
    console.log(`This is mapTest ${mapTest}`);

I get [object Map] with no values - I thought that when using an arrow function, return was implicit?

Image of output - with or without String concatenation enter image description here

I ultimately want to extract these values to assign them to the Y axis of a Victory BarChart. Thanks for any insight / guidance.

Answer 1

Several issues:

• forEach always returns undefined. You need to use map instead.
• (key, value["Penetration_2018"]) is not a tuple, but a comma operator expression and results in the value of value["Penetration_2018"]. Use square bracket notation instead.
• A Map has no useful representation when cast to string. You need to turn it to an array or something else to get a more useful string representation:

Code:

const mapTest = new Map(
    Object.entries(filterCounties).map(
        ([key, value]) => [key, value["Penetration_2018"]]
    )
);
console.log(`This is mapTest ${JSON.stringify([...mapTest])}`);

With arrays it is more conventional to just apply map directly on the array, and it is a mystery why you would need a Map anyway. If you want the unique values, then use a Set:

const uniques = [...new Set(filterCounties.map(value => value["Penetration_2018"]))];
console.log(`This is uniques: ${uniques}`);

Answer 2

Object.entries is pretty useless on an array. If necessary, you'd use the array entries method.

I thought that when using an arrow function, return was implicit?

An arrow function with a concise body implicitly returns the expression value, yes. However, in your first example, console.log does not return anything, and in both examples, forEach returns nothing. And in your second example, you use the comma operator for some kind of "tuple" notation while the Map constructor requires arrays.

Instead of trying to use "forEach to map array of objects", you should use the map method to map an array of objects!

const mapTest = new Map(filterCounties.map((value, key) => [key, value.Penetration_2018]));
console.log('This is mapTest:', mapTest);