Changing Object keys & values and preserving the initial order

Question

Given the state object below

{
  colour: ['red', 'blue', 'green'],
  size: ['small', 'medium', 'large'],
  position: ['bottom', 'top', 'left', 'right'],
}

I need to be able to change/update its attribute values attrValues as well as the attribute keys attrKey

I'm using the following logic to do so:

setAttributes((prevState) => {
  const key = Object.keys(attributeToUpdate)[0];
  if (key !== attrKey) {
    delete prevState[key];
  }
  return { ...prevState, [attrKey]: attrValue };
});

If I change the attribute key for colour to color it works but the resulting state change to:

{
  size: ['small', 'medium', 'large'],
  position: ['bottom', 'top', 'left', 'right'],
  color: ['red', 'blue', 'green'],
}

Moving the color attribute to the end, I would like to keep it in its original position.

Any help or pointers will be much appreciated.

The position of keys in an object are not fixed (or at least cannot be relied on!). If you need to position things, you need an array — Jamiec, Dec 03 '21 at 11:07
@Jamiec ... Isn't key insertion prescedence/order guaranteed since ES6/ES2015 with the exception of purely digit based keys who's insertion is handled by an ascending key order? — Peter Seliger, Dec 03 '21 at 11:32
@PeterSeliger yeah perhaps my comment was flippant - it may be fixed, you cant affect that ordering though AFAIK. My commant should have said "cannot be controlled" not "are not fixed" — Jamiec, Dec 03 '21 at 11:35
Why is order important would be my question. If you need to map over them simply declare a separate array of keys and map over that. Looks like an [xy problem](https://en.wikipedia.org/wiki/XY_problem) — pilchard, Dec 03 '21 at 12:37
@Pilchard ... I too, always ask this question. At SO I ran into the only somehow acceptable use case. It was about comparing/updating local storage data where people would compare JSON-stringified objects to one another, arguing that a deep object (based) comparison is (a) not needed, (b) to complicated to implement, (c) not performant. The approach then was to unify each object's key precedence (alphabetically and recursively) and then compare their stringified versions. — Peter Seliger, Dec 03 '21 at 15:00

Peter Seliger · Accepted Answer · 2021-12-03T14:01:15.823

Though one should take into account the expressed concerns about key insertion order / precedence the solution the OP is looking for might come close to something like the next provided code ...

function renamePropertyAndKeepKeyPrecedence(obj, [oldKey, newKey]) {
  const descriptors = Object.getOwnPropertyDescriptors(obj);
  if (descriptors.hasOwnProperty(oldKey)) {
    Object
      .entries(descriptors)
      .reduce((target, [key, descriptor]) => {

        // delete every property.
        Reflect.deleteProperty(target, key);

        if (key === oldKey) {
          // rename addressed key.
          key = newKey;
        }
        // reassign every property.
        Reflect.defineProperty(target, key, descriptor)

        return target;

      }, obj);
  }
  return obj;
}

const sample = {
  position: ['bottom', 'top', 'left', 'right'],
  colour: ['red', 'blue', 'green'],
  size: ['small', 'medium', 'large'],
};
console.log('before property renaming ...', { sample });

renamePropertyAndKeepKeyPrecedence(sample, ['colour', 'color']);
console.log('after property renaming ...', { sample });

.as-console-wrapper { min-height: 100%!important; top: 0; }

Jamiec · Answer 2 · 2021-12-03T11:21:20.997

You cannot control the order of keys in a n object - if order is important you should have an array of objects. Then you can rebuild the state having removed the item you want to and replace it.

The demo below shows this in practice:

let prevState = [
  {key:"colour",values: ['red', 'blue', 'green']},
  {key:"size", values:['small', 'medium', 'large']},
  {key:"position",values:['bottom', 'top', 'left', 'right']}
]

const indexToRemove = prevState.findIndex(x => x.key == "colour");

prevState = [
  ...prevState.slice(0,indexToRemove),
  {key:"color", values:['red', 'blue', 'green']},
  ...prevState.slice(indexToRemove+1)
]
console.log(prevState)

So if I understand your code the correction would be

setAttributes((prevState) => {
  const key = Object.keys(attributeToUpdate)[0];
  const indexToRemove = prevState.findIndex(x => x.key == key);

  return [
    ...prevState.slice(0,indexToRemove),
    {key:attrKey, values:attrValue},
    ...prevState.slice(indexToRemove+1)
  ]
});

And you'd have to update the rest of your code to use an array of state rather than an object.

I've decided to use an array of objects as pointed out here and the suggestions and comments, thank you — Ricardo Sanchez, Dec 06 '21 at 08:37

Changing Object keys & values and preserving the initial order

2 Answers2