ES6 – Loop through objects of objects and mutate the object with additional properties

I’m trying to loop through the counties object of object and add two new properties(nameCombined & codeCombined) to the existing Keys (Bucks and Montgomery)

I got up till here. But not able to mutate 🙁

Object.entries(object1).forEach((item, key) => item.map(item => console.log('item', item)));

Here is the Data:

const counties = {
  "Bucks": {
        "countyCode": "42017",
        "globalStateCode": "PA",
        "stateCode": "PA"
    },
    "Montgomery": {
        "countyCode": "42091",
        "globalStateCode": "PA",
        "stateCode": "PA"
    }
};

Expected Result:

"Bucks": {
        "countyCode": "42017",
        "globalStateCode": "PA",
        "stateCode": "PA”,
    nameCombined: “Bucks (PA)", // basically this the end result of => key + " (" + counties[key].stateCode + ")"
        codeCombined: “42017 PA Bucks”// basically this the end result of =>  counties[key].countyCode + " " + counties[key].stateCode + " " + key

    },
    "Montgomery": {
        "countyCode": "42091",
        "globalStateCode": "PA",
        "stateCode": "PA”,
    nameCombined: “Montgomery (PA)", // basically this the end result of => key + " (" + counties[key].stateCode + ")"
        codeCombined: “42091 PA Montgomery”// basically this the end result of =>  counties[key].countyCode + " " + counties[key].stateCode + " " + key
    }

Answer

You were on the right path with entries and forEach, but if you want to mutate the original object then map isn’t what you want– that is intended to both iterate over items in an array and, critically, return a new array. Instead, you can simply mutate the original in the body of your forEach, like so:

const counties = {
  "Bucks": {
        "countyCode": "42017",
        "globalStateCode": "PA",
        "stateCode": "PA"
    },
    "Montgomery": {
        "countyCode": "42091",
        "globalStateCode": "PA",
        "stateCode": "PA"
    }
};

Object.entries(counties).forEach(([countyName, county]) => {
  county.nameCombined = `${county.countyCode} (${county.stateCode})`;
  county.codeCombined = `${county.countyCode} ${county.stateCode} ${countyName}`;
});

console.log(counties);

Note you could get a bit cuter with destructuring to cut down on all of the county.someProperty above. Also worth noting– be careful if you’re mutating objects– if you do it too liberally it can cause a real debugging nightmare.

EDIT

In response to the question in comments:

Why is [countyName, county] is in array notation?

The output of Object.entries(someObject) will be an array of arrays, in which the inner arrays consist of a property/key of the original object and the value. This is perhaps better understood via example:

const lumberjanes = {
   scientist: 'Jo',
   strategist: 'Mal',
   enforcer: 'April',
   archer: 'Molly',
   wildcard: 'Ripley',
};

console.log(Object.entries(lumberjanes));

/*
Logs:
[
  ['scientist', 'Jo'],
  ['strategist', 'Mal'],
  ...etc
]
*/

When we loop over that output, if we just write it as

Object.entries(lumberjanes)
    .forEach(entry => `Name: ${entry[1]}; Role: ${entry[0]}`);

we have to access the values by their index, which isn’t very readable at a glance. If instead we can use destructuring to separate that parameter into named variables before we access them in the function body, like so:

Object.entries(lumberjanes)
    .forEach(([name, entry]) => `Name: ${name}; Role: ${entry}`);