Cannot assign to read only property 'whatever' of object #<Object>?

Question

I have the following code:

let filteredArray = data
        .filter((object) =>
            isFilterInArray(filterBy, Object.values(object))
        )
        .forEach((object) => {
            Object.keys(object).forEach((key) => {
                object[key] = markHighlightedText(filterBy, object[key]);
            });
        });

It should be filtering initially the items that an array contains based on a filterBy value.

Once I filter it, I'm trying to modify each value and do some stuff, but then the

object[key] = markHighlightedText(filterBy, object[key]);

is failing with the following error:

Why is this wrong?

Looks like you need to map it to a new object

epascarello
– epascarello

2021-08-05 15:52:47 +00:00
Commented Aug 5, 2021 at 15:52 — epascarello
– epascarello, Commented Aug 5, 2021 at 15:52

Raz Luvaton · Accepted Answer · 2021-08-05 16:23:31Z

1

It looks like you’re trying to change non-configurable property attributes

A TypeError is thrown when attempts are made to change non-configurable property attributes (except value and writable, if permitted) unless the current and new values are the same.

From MDN - Modifying a property

And because you got the key from Object.keys it’s mean the property is also enumerable

The enumerable property attribute defines whether the property is picked by Object.assign() or spread operator. For non-Global_Objects/Symbol properties it also defines whether it shows up in a for...in loop and Object.keys() or not.

From MDN - Modifying a property - Enumerable attribute

Mapping it to a new object as epascarello commented, will fix that issue


let filteredArray = data
  .filter((object) => isFilterInArray(filterBy, Object.values(object)))
  .map((object) => {
      // We are creating new object and not assigning to the original one because
      // some object keys aren’t writable (can’t assign to them)
      // but enumerable - meaning we get them in the Object.keys
      return Object.keys(object).reduce((newObject, key) => {
        newObject[key] = markHighlightedText(filterBy, object[key]);
        return newObject;
      }, {});
  });

edited Aug 5, 2021 at 16:23

answered Aug 5, 2021 at 15:48

Raz Luvaton

3,8904 gold badges27 silver badges50 bronze badges

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

1 Comment

Sonhja Over a year ago

I'm trying but I cannot find the code solution... any help?

Collectives™ on Stack Overflow

Cannot assign to read only property 'whatever' of object #<Object>?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related