Change values of keys of an object in an object array (TypeScript)

Question

I want to change the values of keys of the 1st object in an object array.

Following is the attempt I followed so far.

The object array:

const objArray: FoodItems[] = [
  {
    apple: 4,
    banana: 7,
    'mango & grapes': 9,
    Cherry: 7,
  },
]

The above object is of the type of FooItems[]:

export type FoodItems = {
  apple: number;
  banana: number;
  'mango & grapes': number;
  Cherry: number;
}

The new value of key I need to assign:

const newValue = 34;

The code I tried to modify each key:

objArray.map(item => ({
  ...item,
  ...{
    apple: newValue,
    banana: newValue,
    'mango & grapes': newValue,
    Cherry: newValue,
  },
})),

Please, may I know a simpler way of doing this, instead of changing each key individually?

Thanks in advance...

You're setting new values for each key, so what other possible alternative is there to changing each one? I don't understand the question — CertainPerformance, Jul 03 '22 at 03:21
objArray.map(item => ({ ...item, apple: 44, banana: 67, 'mango & grapes': 19, Cherry: 47, }, )) Keep ...item if you want to preserve other properties or else its not required to do ...item .So, objArray.map(item => ({ apple: 44, banana: 67, 'mango & grapes': 19, Cherry: 47, } )) — subodhkalika, Jul 03 '22 at 03:26
yes, @CertainPerformance . I put my question wrong. I modified the question. — Kiara Tansas, Jul 03 '22 at 03:34

CertainPerformance · Accepted Answer · 2022-07-03T04:16:44.150

1

One option is to map the keys of the existing object into an array of entries to create a new one and return the newValue in the value section.

const objArray = [
  {
    apple: 4,
    banana: 7,
    'mango & grapes': 9,
    Cherry: 7,
  },
];
const newValue = 34;
const newArray = objArray.map(item => Object.fromEntries(
  Object.keys(item)
    .map(key => [key, newValue])
));
console.log(newArray);

To get the new type to be an array FoodItems too - TypeScript works best with static keys. Performing the same operation on all keys of an object to produce a new one is pretty weird, but that's your assignment here. I think the easiest way to do it would be to just assert that the Object.fromEntries result is of the required type:

const newArray = objArray.map(item => Object.fromEntries(
  Object.keys(item)
    .map(key => [key, newValue])
) as FoodItems);

And then newArray is equivalent to FoodItems[].

Unfortunately, Object.keys and related methods don't return the keyof the object - just string - so you have to either assert the type of the result (as done above) or list out each individual property (as you were doing originally).

edited Jul 03 '22 at 04:16

answered Jul 03 '22 at 03:37

CertainPerformance

356,069
52
309
320

I'm getting an error saying `'Type '{ [k: string]: number; }[]' is not assignable to type 'FoodItems[]'`. I think the new array's type is different from the original? Because the type of original array is `FoodItems[]`. Thank you for the answer btw – Kiara Tansas Jul 03 '22 at 03:49
What is FoodItems? This is the first time you've mentioned that, I don't see it in the code in the question or as one of your requirements – CertainPerformance Jul 03 '22 at 03:58
I'm really sorry about it. I added the type also. again really sorry for the inconvenience. I tried to provide a minimum code, to avoid distractions. but now I understand that I missed some vital parts. I think now all complete. Thank you for your valuable suggestions. – Kiara Tansas Jul 03 '22 at 04:07
Yep, I see it. See edit – CertainPerformance Jul 03 '22 at 04:16

score 0 · Answer 2 · answered Jul 03 '22 at 03:47

Properties in the target object are overwritten by properties in the sources if they have the same key. Later sources' properties overwrite earlier ones.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

const objArray = [
  {
    apple: 4,
    banana: 7,
    'mango & grapes': 9,
    Cherry: 7,
  },
]

const newObj = {
    apple: 1,
    banana: 2,
    'mango & grapes': 3,
    Cherry: 4,
  }
  
  newObjArray = objArray.map(item => Object.assign(item, newObj))
  console.log(newObjArray)

what I need to do is assign a new value to each key of the 1st object in the array. thank you for the answer btw — Kiara Tansas, Jul 03 '22 at 03:52

score 0 · Answer 3 · answered Jul 03 '22 at 04:21

We could iterate over each obj's keys and assign new value to each key without changing object reference or creating new obj's.

const objArray = [
  {
    apple: 4,
    banana: 7,
    'mango & grapes': 9,
    Cherry: 7,
  },
]

const newValue = 34;
  
  newObjArray = objArray.forEach(item => Object.keys(item)
  .forEach(key => item[key] = newValue))
  console.log(objArray)

Change values of keys of an object in an object array (TypeScript)

3 Answers3