JS change nested property

Question

I need to change a nested variable property. First check if it exists then change it to 'N/A' if necessary. This is what I have.

const json = {
 isCat: {
    isAvaliable: true,
    count: 5
  },
  isDog: {
    isAvaliable: true,
    count: 10
  },
  isFrog: {
    isAvaliable: false,
    count: null
  }
}

const newJson = { ...json }
if(!jsonObj.isCat.count) {
    newJson = {...newJson, json.isCat.count: 'N/A'}
}

Im not sure how to set count lets say by goign directly to it and changing the value. It seems simple maybe im missing something.

I can see the value in the if statement but i cant make any changes to the actual property value itself. Basically if a value is null, change it to 'N/A'

You should keep the data as `null` and only render `N/A` on the page, unless it's some API that's expecting a string with N/A, but then, it would be a poor API... — Emile Bergeron, Oct 27 '20 at 19:22
Are you sure ypu want to change the data for count to be a string `N/A`? Surely leaving it as null is better, or maybe setting it to 0. — JMadelaine, Oct 27 '20 at 19:22
`newJson` is also `const`, so the reassignment won't work either. — Drew Reese, Oct 27 '20 at 19:22
You've tagged the question with [reactjs], is this data in the state? — Emile Bergeron, Oct 27 '20 at 19:23
Does this answer your question? [How to update nested state properties in React](https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react) — Emile Bergeron, Oct 27 '20 at 19:24
You don't change the data to something that is ready to render, you just render something based on the data. — JMadelaine, Oct 27 '20 at 19:25

mr hr · Answer 1 · 2020-10-27T19:41:31.360

1

You can use array reduce method. First get all the keys using Object.keys method. Then traverse the keys and check the count is null or not. If null then change it to 'N/A'.

const json = {
  isCat: {
    isAvaliable: true,
    count: 5,
  },
  isDog: {
    isAvaliable: true,
    count: 10,
  },
  isFrog: {
    isAvaliable: false,
    count: null,
  },
};

const ret = Object.keys(json).reduce((prev, c) => {
  const p = prev;
  if (!json[c].count) p[c] = { ...json[c], count: 'N/A' };
  else p[c] = { ...json[c] };
  return p;
}, {});
console.log(ret);

edited Oct 27 '20 at 19:41

answered Oct 27 '20 at 19:23

mr hr

3,162
2
9
19

I get an error basically, json is a param in method. Cant assign param erro – chrus54321 Oct 27 '20 at 19:31
You may be did something wrong. The code should work. – mr hr Oct 27 '20 at 19:32
May be you are facing object mutation problem. I have fixed it and it will return a new object. Now check it. – mr hr Oct 27 '20 at 19:42
Another problem I have is that what if there is no object altogether like no isFrog exists. I want to be able to still set count – chrus54321 Oct 27 '20 at 20:09

score 1 · Answer 2 · answered Oct 27 '20 at 19:26

Using Object.entries and Object.fromEntries you can map the old object to the new object. If the count property is truthy, i.e. not null then map it through, otherwise shallow copy the element and update the count property with the new "N/A" value. This avoids mutating your original object.

const newJson = Object.fromEntries(Object.entries(json).map(([key, value]) => ([
  key,
  value.count ? value : { ...value,
    count: 'N/A'
  }
])));

const json = {
  isCat: {
    isAvaliable: true,
    count: 5
  },
  isDog: {
    isAvaliable: true,
    count: 10
  },
  isFrog: {
    isAvaliable: false,
    count: null
  }
};

const newJson = Object.fromEntries(Object.entries(json).map(([key, value]) => ([
  key,
  value.count ? value : { ...value,
    count: 'N/A'
  }
])));

console.log(newJson);

score 1 · Answer 3 · answered Oct 27 '20 at 19:45

1

Another solution with reduce. Beware of it's comma operator in the return value.

const json = {isCat: {isAvaliable: true,count: 5,},isDog: {isAvaliable:true,count: 10,},isFrog: {isAvaliable: false,count: null,},};

const res = Object.keys(json).reduce((pV,cV)=>(json[cV].count==null?json[cV].count='N/A':null,json),{});
console.log(res);

answered Oct 27 '20 at 19:45

MWO

2,627
2
10
25

What if isCat doesnt exist and I still want to set isAvailable to false for example – chrus54321 Oct 27 '20 at 20:10
then it would be better to use Object.entries() instead of Object.key() where you can check for the current key name == isCat – MWO Oct 27 '20 at 20:25

JS change nested property

3 Answers3