iterate over associative array of object

Question

I have this table of objects:

var gridRegions = {
  seattle:         { label: "SEA", lats: [49.00, 44.50], lons: [125.00, 117.00], numGrids: 576, gridLabels: [] },
  great_falls:     { label: "GTF", lats: [49.00, 44.50], lons: [117.00, 109.00], numGrids: 576, gridLabels: [] },
  billings:        { label: "BIL", lats: [49.00, 44.50], lons: [109.00, 101.00], numGrids: 576, gridLabels: [] },
  twin_cities:     { label: "MSP", lats: [49.00, 44.50], lons: [101.00,  93.00], numGrids: 576, gridLabels: [] },
  green_bay:       { label: "GRB", lats: [48.25, 44.00], lons: [ 93.00,  85.00], numGrids: 544, gridLabels: [] }, 
  lake_huron:      { label: "LHN", lats: [48.00, 44.00], lons: [ 85.00,  77.00], numGrids: 512, gridLabels: [] },
  montreal:        { label: "MON", lats: [48.00, 44.00], lons: [ 77.00,  69.00], numGrids: 512, gridLabels: [] },
  halifax:         { label: "HFX", lats: [48.00, 44.00], lons: [ 69.00,  61.00], numGrids: 512, gridLabels: [] },
  klamath_falls:   { label: "LMT", lats: [44.50, 40.00], lons: [125.00, 117.00], numGrids: 576, gridLabels: [] },
  salt_lake_city:  { label: "SLC", lats: [44.50, 40.00], lons: [117.00, 109.00], numGrids: 576, gridLabels: [] },
  cheyenne:        { label: "LMT", lats: [44.50, 40.00], lons: [109.00, 101.00], numGrids: 576, gridLabels: [] },
  omaha:           { label: "OMA", lats: [44.50, 40.00], lons: [101.00,  93.00], numGrids: 576, gridLabels: [] },
  chicago:         { label: "ORD", lats: [44.00, 40.00], lons: [ 93.00,  85.00], numGrids: 512, gridLabels: [] },
  detroit:         { label: "DET", lats: [44.00, 40.00], lons: [ 85.00,  77.00], numGrids: 512, gridLabels: [] },
  new_york:        { label: "NYC", lats: [44.00, 40.00], lons: [ 77.00,  69.00], numGrids: 512, gridLabels: [] },
  san_francisco:   { label: "SFO", lats: [40.00, 36.00], lons: [125.00, 118.00], numGrids: 448, gridLabels: [] },
  las_vegas:       { label: "LAS", lats: [40.00, 35.75], lons: [118.00, 111.00], numGrids: 476, gridLabels: [] },
  denver:          { label: "DEN", lats: [40.00, 35.75], lons: [111.00, 104.00], numGrids: 476, gridLabels: [] },
  wichita:         { label: "ICT", lats: [40.00, 36.00], lons: [104.00,  97.00], numGrids: 448, gridLabels: [] },
  kansas_city:     { label: "MKC", lats: [40.00, 36.00], lons: [ 97.00,  90.00], numGrids: 448, gridLabels: [] },
  st_louis:        { label: "STL", lats: [40.00, 36.00], lons: [ 91.00,  84.00], numGrids: 448, gridLabels: [] },
  cincinnati:      { label: "LUK", lats: [40.00, 36.00], lons: [ 85.00,  78.00], numGrids: 448, gridLabels: [] },
  washington:      { label: "DCA", lats: [40.00, 36.00], lons: [ 79.00,  72.00], numGrids: 448, gridLabels: [] },
  los_angeles:     { label: "LAX", lats: [36.00, 32.00], lons: [121.50, 115.00], numGrids: 416, gridLabels: [] },
  phoenix:         { label: "PHX", lats: [35.75, 31.25], lons: [116.00, 109.00], numGrids: 504, gridLabels: [] },
  albuquerque:     { label: "ABQ", lats: [36.00, 32.00], lons: [109.00, 102.00], numGrids: 448, gridLabels: [] },
  dallas_ft_worth: { label: "DFW", lats: [36.00, 32.00], lons: [102.00,  95.00], numGrids: 448, gridLabels: [] },
  memphis:         { label: "MEM", lats: [36.00, 32.00], lons: [ 95.00,  88.00], numGrids: 448, gridLabels: [] },
  atlanta:         { label: "ATL", lats: [36.00, 32.00], lons: [ 88.00,  81.00], numGrids: 448, gridLabels: [] },
  charlotte:       { label: "CLT", lats: [36.00, 32.00], lons: [ 81.00,  75.00], numGrids: 384, gridLabels: [] },
  el_paso:         { label: "ELP", lats: [32.00, 28.00], lons: [109.00, 103.00], numGrids: 384, gridLabels: [] },
  san_antonio:     { label: "SAT", lats: [32.00, 28.00], lons: [103.00,  97.00], numGrids: 384, gridLabels: [] },
  houston:         { label: "HOU", lats: [32.00, 28.00], lons: [ 97.00,  91.00], numGrids: 384, gridLabels: [] },
  new_orleans:     { label: "MSY", lats: [32.00, 28.00], lons: [ 91.00,  85.00], numGrids: 384, gridLabels: [] },
  jacksonville:    { label: "JAX", lats: [32.00, 28.00], lons: [ 85.00,  79.00], numGrids: 384, gridLabels: [] },
  brownsville:     { label: "BRO", lats: [28.00, 24.00], lons: [103.00,  97.00], numGrids: 384, gridLabels: [] },
  miami:           { label: "MIA", lats: [28.00, 24.00], lons: [ 83.00,  77.00], numGrids: 384, gridLabels: [] }
};  

In the main usage, the user selects the region of interest by region name and I'm able to access the object contents for a region by gridRegions['name'].val

What I'm trying to do at startup is to iterate thru the entire list and dynamically add html to the empty array gridLabels based on the value of numGrids for that entry. I have tried every combination of

Object.keys(gridRegions).forEach((region, label) =>  {
  console.log('grid region: ', region );
  console.log('Object.entries ', Object.entries(region));
});
Object.entries(gridRegions).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});
Object.forEach((region) => {
  console.log(region.label);
  console.log(region[label]);
  console.log(region['label']);
})

But I can't get past only being able to access the region name. Everything else is undefined. What I'd like to do is

gridRegions.forEach((region) => {
  for (i = 0; i < region.numGrids; i++)
    gridLabels[i] = region.label + i.pad(3);
}

Is there a secret here?

Thanks

Answer 1

forEach 's arguments are the array element (in this case, a key) and the array index. If you want to get the object referenced by the key, you have to access it with [] first if you're using forEach :

Object.keys(gridRegions).forEach((region) => {
  const obj = gridRegions[region];
  console.log(obj.label);

Or you can use Object.entries to start with, which iterates over an objects properties and property values at once:

 const gridRegions = { seattle: { label: "SEA", lats: [49.00, 44.50], lons: [125.00, 117.00], numGrids: 576, gridLabels: [] }, great_falls: { label: "GTF", lats: [49.00, 44.50], lons: [117.00, 109.00], numGrids: 576, gridLabels: [] }, }; Object.entries(gridRegions).forEach(([key, obj]) => { console.log(`${key} : ${JSON.stringify(obj)}`); });