Delete object by ID from nested object in the redux state Javascript / ES6

Question

I am trying to remove an object from a nested object items in the redux state. I can only manage to remove the values instead of the actually key. I cannot filter it since it's not an array. I though maybe Object.keys(state.items[or_id]).reduce() might be a option?

The state:

items: {
      'b0ad5c5c-5cf4-40b5-9bc9-87f773ba3c06': {
        '7e8557dc-9352-4dea-a062-0a1d43371698': {
          value: {
            id: '7e8557dc-9352-4dea-a062-0a1d43371698',
            expires_on: '2020-11-19T14:22:18.182000+00:00'
          }
        },
        '7e8557dc-9352-4dea-a062-0a1d43371692': {
          value: {
            id: '7e8557dc-9352-4dea-a062-0a1d43371692',
            expires_on: '2021-11-19T14:22:18.182000+00:00'
          }
        }
      }
    },

The reducer:

if(type === DELETE){
     const { or_id, in_id } = payload;
     return {
          ...state,
          items: {
            ...state.items,
            [or_id]: {
              ...state.items[or_id],
              [in_id]: {},
            },
          },
        };
}

If I use this method above the key still exists in the state.

 items: {
      'b0ad5c5c-5cf4-40b5-9bc9-87f773ba3c06': {
        '7e8557dc-9352-4dea-a062-0a1d43371698': {},
        '7e8557dc-9352-4dea-a062-0a1d43371692': {
          value: {
            id: '7e8557dc-9352-4dea-a062-0a1d43371692',
            expires_on: '2021-11-19T14:22:18.182000+00:00'
          }
        }
      }

Expected result (1 item less):

 items: {
      'b0ad5c5c-5cf4-40b5-9bc9-87f773ba3c06': {
        '7e8557dc-9352-4dea-a062-0a1d43371692': {
          value: {
            id: '7e8557dc-9352-4dea-a062-0a1d43371692',
            expires_on: '2021-11-19T14:22:18.182000+00:00'
          }
        }
      }

what is the condition to remove that item?

Sarang PM
– Sarang PM

2020-12-07 09:48:25 +00:00
Commented Dec 7, 2020 at 9:48 — Sarang PM
– Sarang PM, Commented Dec 7, 2020 at 9:48
It is a delete if you mean that

The M
– The M

2020-12-07 09:49:25 +00:00
Commented Dec 7, 2020 at 9:49 — The M
– The M, Commented Dec 7, 2020 at 9:49

HMR · Accepted Answer · 2020-12-07 09:52:51Z

3

You can do it in several ways:

Using spread and rest

const removeKey = (key, object) => {
  //using spread and rest
  const { [key]: gone, ...rest } = object;
  return rest;
};
console.log(
  'remove key "W"',
  removeKey('W', { ok: 88, W: 'gone' })
);

Using Object.fromEntries

//using Object.fromEntries
const removeKey = (key, object) =>
  Object.fromEntries(
    Object.entries(object).filter(([k]) => k !== key)
  );
console.log(
  'remove key "W"',
  removeKey('W', { ok: 88, W: 'gone' })
);

Using delete on a shallow copy

//using delete on shallow copy
const removeKey = (key, object) => {
  const copy = { ...object };
  delete copy[key];
  return copy;
};
console.log(
  'remove key "W"',
  removeKey('W', { ok: 88, W: 'gone' })
);

answered Dec 7, 2020 at 9:52

HMR

39.5k26 gold badges99 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Delete object by ID from nested object in the redux state Javascript / ES6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related