Creating an updated and edited nested object from given one (JavaScript)

Question

I got a schema object that looks like this:

const schema = {
social: {
    facebook: 'someValue',
    twitter: {
        department: {
            departmentImage: {
                editable: 'someValue'
            }
         }
      }
   }
};

The editable property indicates a value that I want to edit, and may appear in several nested locations in the object.

My approach to edit it is to recursively create a new object who is an exact copy of the original, and populate a new value where I encounter editable. Like this:

const formatSchema = (schema, data, formattedSchema = {}) => {
  for (const schemaKey in schema) {
    const firstKey = Object.keys(schema[schemaKey])[0];
            
    if (schema[schemaKey] instanceof Object) {
        formattedSchema[schemaKey] = schema[schemaKey];
        formatschema(schema[schemaKey], data, formattedSchema[schemaKey]);
    }
    if (schema[schemaKey] instanceof Object && firstKey === 'editable') {
       *replacing data logic*
       formattedSchema[schemaKey] = ...*replacingData*;
       formatschema(schema[schemaKey], data, formattedSchema[schemaKey]);
    } else {
        formattedSchema[schemaKey] = schema[schemaKey];
    }
  }
 return formattedSchema;
};

But I feel this solution may be inefficient as I create every single bit of the object from scratch and this would happen thousands of times a day.

Is there a way to do it better?

I don't understand one thing. Do you want to create deep copy or not? Do you ask if this can be done without creating a copy of each nested object? Or do you ask if this can be done faster? — Konrad
– Konrad, Commented Apr 14, 2022 at 21:48
@KonradLinkowski Yes, I do need the deep copy. Just if it can be done faster/more efficiently — flow24
– flow24, Commented Apr 14, 2022 at 22:09

Mulan · Accepted Answer · 2022-04-15 03:29:57Z

2

Here's a recursive immutable update that works for any native input type. Don't worry about performance here as it's plenty fast, even if your object has thousands of fields. Let me know how this suits you and I can make a change if it's needed -

function update(t, func) {
  switch (t?.constructor) {
    case Object:
      return Object.fromEntries(
        Object.entries(t).map(([k,v]) =>
          [k, func([k, update(v, func)])]
        )
      )
    case Array:
      return t.map((v, k) => func([k, update(v, func)]))
    default:
      return func([null, t])
  }
}

const schema = {
  social: {
    facebook: 'someValue',
    twitter: {
      department: {
        departmentImage: {
            editable: 'someValue'
        }
      },
      someArr: [{ editable: 1 }, { editable: 2 }, { hello: "world" }]
    },
  }
}

console.log(update(schema, ([k,v]) =>
  k == "editable" ? "✅" : v
))

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

{
  "social": {
    "facebook": "someValue",
    "twitter": {
      "department": {
        "departmentImage": {
          "editable": "✅"
        }
      },
      "someArr": [
        {
          "editable": "✅"
        },
        {
          "editable": "✅"
        },
        {
          "hello": "world"
        }
      ]
    }
  }
}

answered Apr 15, 2022 at 3:29

Mulan

136k35 gold badges240 silver badges276 bronze badges

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

2 Comments

flow24 Over a year ago

Thank you, working great. Why is it so efficient? I know hash tables (i.e js object) are o(1), but we are mapping arrays here quite a lot. What am I missing?

Mulan Over a year ago

javascript objects are not hash tables; all keys are converted to simple string representations. what are “mapping arrays”? javascript arrays, […], also have O(1) access. the performance of update is O(n), and directly proportionate to the size of your input.

Collectives™ on Stack Overflow

Creating an updated and edited nested object from given one (JavaScript)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related