Deeply assign JavaScript object literal [duplicate]

Question

I am trying to deeply assign a value in an object. For example:

const errors = {}
if(errorOnSpecificField) {
  // TypeError: Cannot read property 'subSubCategory' of undefined(…)
  errors.subCategory.subSubCategory.fieldWithError = 'Error Message'
}

Right now, without lodash, I can do:

const errors = {}
if(errorOnSpecificField) {
    errors.subCategory = errors.SubCategory || {}
    errors.subCategory.subSubCategory = errors.SubCategory.subSubCategory || {}
    errors.subCategory.subSubCategory.fieldWithError = 'Error Message'
}

With lodash, I can do this:

const errors = {}
if(errorOnSpecificField) {
    _.set(errors, 'subCategory.subSubCategory.fieldWithError', 'Error Message');
}

I am trying to avoid using a third party library. Is there a more elegant solution, especially now that es2015 has object destructuring. The inverse operation is easy:

  let {subCategory : {subSubCategory: {fieldWithError}}} = errors

What is an elegant solution to deep object assignment? Thanks!

As you mention, because it overrides the other properties already set, this won't work for my case — aherriot
– aherriot, Commented Jun 15, 2016 at 19:12
you might then look for some of the many extend implementations — le_m
– le_m, Commented Jun 15, 2016 at 19:13
Uh, why not just use errors.subCategory = {subSubCategory: {fieldWithError: 'Error Message'}}? It's the exact reverse of the destructuring. — Bergi
– Bergi, Commented Jun 15, 2016 at 19:33
The problem is that if I already have other subSubCategories defined, it will overwrite them — aherriot
– aherriot, Commented Jun 15, 2016 at 19:39

Bo Borgerson · Accepted Answer · 2016-06-15 19:43:47Z

0

Here's a fairly readable way to safely assign to the deep object:

(((errors||{}).subCategory||{}).subSubCategory||{}).fieldWithError = 'Error Message'

That doesn't create errors.subCategory.subSubCategory if it doesn't already exist, though.

edited Jun 15, 2016 at 19:43

answered Jun 15, 2016 at 19:10

Bo Borgerson

1,40611 silver badges20 bronze badges

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

2 Comments

Bergi Over a year ago

This actually doesn't work for assignment. For accessing, yes, but not for creating properties.

Bo Borgerson Over a year ago

Hmm... It won't create errors.subCategory.subSubCategory, but it will safely assign to it if it already exists.

Damon · Accepted Answer · 2016-06-15 19:53:47Z

0

Short answer, no there is no clean way of doing this without writing a method for it (tbh you could just use the method from lodash without importing the whole library)

... however ...

WARNING This is for fun only. Do not try this in production (req es6).

Object.prototype.chainSet = function() {
  let handler = {
    get (target, name) {
      if (!(name in target)) {
        target[name] = new Proxy({}, handler)
      }
      return target[name]
    }
  }

  return new Proxy(this, handler)
}

use:

let a = {}
a.chainSet().foo.bar.baz = 1
a.foo.bar.baz // => 1

answered Jun 15, 2016 at 19:53

Damon

4,3562 gold badges19 silver badges27 bronze badges

Comments

Cobus Kruger · Accepted Answer · 2016-06-15 20:19:38Z

0

Object.assign() will work just fine for what you're asking.

let errors = { otherField: "value" };
let newobj = {subCategory : {subSubCategory: {fieldWithError: "Error goes here"}}};
Object.assign(errors, newobj);

This yields:

{
  otherField:'value',
  subCategory: {
    subSubCategory: {
      fieldWithError:'Error goes here'
    }
  }
}

answered Jun 15, 2016 at 20:19

Cobus Kruger

8,6655 gold badges66 silver badges109 bronze badges

1 Comment

le_m Over a year ago

if errors = {subCategory: {x: "y"}} and you assign newobj, then property x gets "removed" (the whole subCategory object is swapped out). OP is looking for a way to avoid that.

Thalaivar · Accepted Answer · 2016-06-15 23:47:17Z

You could try something like below:

function ErrorRegistry(obj)
{
    this.errors = obj || {};
    this.addError = function(k, msg)
    {
        var keys = k.split('.');
        var o = this.errors;
        for(var i = 0, l = keys.length, last = l-1; i<l; i++)
        {
            if(typeof o[keys[i]] === 'undefined')
                o[keys[i]] = {};
            if(i == last)
                o[keys[i]] = msg;
            else
                o = o[keys[i]];
        }
    };
}
var errors = {'subCategory1':{'fieldWithError1':'Error1'}};
var errorRegistry = new ErrorRegistry(errors);
errorRegistry.addError('subCategory1.fieldWithError2', "Error2");
errorRegistry.addError('subCategory1.subSubCategory1.fieldWithError3', "Error3");
errorRegistry.addError('subCategory1.subSubCategory2.fieldWithError4', "Error4");
errors = errorRegistry.errors;
console.log(errors);

Collectives™ on Stack Overflow

Deeply assign JavaScript object literal [duplicate]

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Linked

Related