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

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...

CodePudding user response：

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).

CodePudding user response：

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)

CodePudding user response：

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)