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
    }

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
    }

• javascript
• ecmascript-6

Share Improve this question Follow asked Feb 4, 2021 at 4:09 dragonflydragonfly 3,22777 gold badges3434 silver badges5454 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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 ments:

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}`);