Javascript nested objects default fallback options

Question

I have a nested option object in javascript. What is the best way to provide default values for them?

Custom javascript object read from a json file with ajax:

{
  "fields": {
    "markdown": {
      "preview": {
        "delay": null,
        "custom": "hello"
      },
      "revisions": {
        "path": "revisions/markdown",
        "limit": 5
      }
    }
  }
}

Default options as fallback if values is not set:

{
  "fields": {
    "markdown": {
      "preview": {
        "delay": 5,
        "css": "https://example.com/my/style.css"
      },
      "revisions": {
        "path": "revisions",
        "limit": 10
      }
    }
  }
}

Expected results

Keep everything from custom object and complete it with default values, "css" in this case.

{
  "fields": {
    "markdown": {
      "preview": {
        "delay": null,
        "css": "https://example.com/my/style.css",
        "custom": "hello"
      },
      "revisions": {
        "path": "revisions/markdown",
        "limit": 5
      }
    }
  }
}

Notes:

The custom object may not include all the nested values. If values are missing default value should apply.
Null, empty and 0 is accepted values and should not be overwritten by default values.
Values in the custom object that is missing as default values makes no harm and does not need to be dealt with.

What I've tried to far

Spread operator does not merge nested objects - https://flaviocopes.com/how-to-merge-objects-javascript/
Object assign does not merge nested objects - How can I merge properties of two JavaScript objects dynamically?

Can you use a library? `jQuery.extend()` has a `deep` option that will recurse. Lodash has `_.merge()`. — Barmar, Sep 13 '19 at 06:45
@Barmar I don't want to do that as I already use this in Vue. But in general, that's good information. Thanks! — Jens Törnell, Sep 13 '19 at 06:48

Nina Scholz · Accepted Answer · 2019-09-13T06:52:18.540

1

You could take a recursive approach by checking the value of the object, if an object and check the nested objects or assign the value if the key does not exist.

function update(object, fallback) {
    Object
        .entries(fallback)
        .forEach(([k, v]) => {
            if (v && typeof v === 'object') {
                update(object[k] = object[k] || (Array.isArray(v) ? [] : {}), v);
            } else if (!(k in object)) {
                object[k] = v;
            }
        });
}

var object = { fields: { markdown: { preview: { delay: null, custom: "hello" }, revisions: { path: "revisions/markdown", limit: 5 } } } },
    fallback = { fields: { markdown: { preview: { delay: 5, css: "https://example.com/my/style.css" }, revisions: { path: "revisions", limit: 10 } } } };

update(object, fallback);

console.log(object);

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

edited Sep 13 '19 at 06:52

answered Sep 13 '19 at 06:45

Nina Scholz

376,160
25
347
392

This will treat each array element as a property that needs to be defaulted. It should probably treat the entire array as a single value. – Barmar Sep 13 '19 at 06:54
But that raises the question of how to deal with arrays of objects -- should it recurse into the objects and merge them? – Barmar Sep 13 '19 at 06:55
actually i use each key and value instead of directly taking a reference to `fallback`. – Nina Scholz Sep 13 '19 at 06:56
but anyway the question has only primitives and objects, without arrays inside, – Nina Scholz Sep 13 '19 at 06:57
@NinaScholz I've tested the new code in jsfiddle and the array part does not work as expected. Other than that it's great work. https://jsfiddle.net/0c56tqam/1/ – Jens Törnell Sep 13 '19 at 06:58
what should happen with the array? – Nina Scholz Sep 13 '19 at 07:02
@NinaScholz Yes, you are right. I only asked for object merging. I did not think that arrays will be treated differently than other kinds of values. But I will probably use arrays at some point. The hard part seems to be how they should be treated. – Jens Törnell Sep 13 '19 at 07:02
it's up to you to specify some rules. – Nina Scholz Sep 13 '19 at 07:02
1

@NinaScholz Crap! I read my fiddle the wrong way. It's working as expected. Sorry! – Jens Törnell Sep 13 '19 at 07:04

Aral Roca · Answer 2 · 2023-06-06T10:48:50.293

You can use default-composer library that work with nested objects:

import { defaultComposer, setConfig } from "default-composer";

// Create a custom emptyChecker
setConfig({ isDefaultableValue: (key, value) => value === undefined })

const data = {
  "fields": {
    "markdown": {
      "preview": {
        "delay": null,
        "custom": "hello"
      },
      "revisions": {
        "path": "revisions/markdown",
        "limit": 5
      }
    }
  }
}

const fallback = {
  "fields": {
    "markdown": {
      "preview": {
        "delay": 5,
        "css": "https://example.com/my/style.css"
      },
      "revisions": {
        "path": "revisions",
        "limit": 10
      }
    }
  }
}

const result = defaultComposer(fallback, data)
console.log(result)

And the output:

{
  "fields": {
    "markdown": {
      "preview": {
        "delay": null,
        "css": "https://example.com/my/style.css",
        "custom": "hello"
      },
      "revisions": {
        "path": "revisions/markdown",
        "limit": 5
      }
    }
  }
}

Javascript nested objects default fallback options

2 Answers2