update nested json object using recursion in JavaScript

Question

I'm trying to create an updated object from an existing object. The sample object is:

// sample object
const testObj = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3,
      f: {
        g: 4
      }
    }
  }
};

I want to create a new object from the above object with some concatenation of each value:

// expected object
const expectedObject= {
  a: '1 a',
  b: {
    c: '2 a',
    d: {
      e: '3 a',
      f: {
        g: '4 a'
      }
    }
  }
};

here is my sample code:

let expectedObject = {};
const newObject = object => {
  Object.entries(object).forEach(([key, value]) => {
    if (typeof value === "object") {
      Object.keys(value).map(key => {
        value[key] = value[key] + " a";
        return value;
      });

      expectedObject[key] = value;
      //return newTest;
    } else {
      expectedObject[key] = value;
      return expectedObject;
    }
  });
  return expectedObject;
};
console.log(newObject(testObj));

the outcome in console is:

{a: 1, b: {…}}
a: 1
b:
c: "2 a"
d: "[object Object] a"
__proto__: Object
__proto__: Object

I wanted to use recursion here and also tried it but no luck. any help, thanks?

const a = o => Object.keys(o).reduce((p, c) => ((p[c] = typeof o[c] === "object" ? a(o[c]) : o[c] + " a"), p), {}); — ASDFGerte
– ASDFGerte, Commented Oct 1, 2019 at 12:34

Nina Scholz · Accepted Answer · 2019-10-01 13:30:20Z

7

You could get a new object my mapping changed values and creating new objects.

function map(object, fn) {
    return Object.fromEntries(Object
        .entries(object)
        .map(([k, v]) => [k, v && typeof v === 'object' ? map(v, fn) : fn(v)])
    );
}

var object = { a: 1, b: { c: 2, d: { e: 3, f: { g: 4 } } } },
    result = map(object, v => v + ' a');

console.log(result);

If you have arrays inside, you could add a check in advance and map the values.

const
    map = fn => {
        const iter = v => v && typeof v === 'object'
            ? Array.isArray(v)
                ? v.map(iter)
                : Object.fromEntries(Object.entries(v).map(([k, v]) => [k, iter(v, fn)]))
            : fn(v);
        return iter;
    };

var object = { a: 1, b: { c: 2, d: { e: 3, f: { g: 4, k: [5, 6] } } } },
    addA = map(v => v + ' a'),
    result = addA(object);

console.log(result);

edited Oct 1, 2019 at 13:30

answered Oct 1, 2019 at 12:37

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

7 Comments

Yahya Over a year ago

I jus copied your code to inex.js file and run with node index.js, got the following error: TypeError: Object.fromEntries is not a function

Mulan Over a year ago

NB this will convert arrays [] to objects {} with string-based keys

cнŝdk Over a year ago

It's also worth of saying that Object.fromEntries() has limited compatibility and is only compatible with new browsers.

Scott Sauyet Over a year ago

@Yahya: But it's easy to write your own fromEntries, either by folding the results: (entries) => entries .reduce ((a, [k, v]) => ({...a, [k]: v}), {}) or with Object.assign: (entries) => Object.assign.apply (null, entries .map (([k, v]) => ({[k]: v}))). The latter is uglier, but likely more efficient.

Yahya Over a year ago

@ScottSauyet thank you very much for your explanation. The answer from Nina Scholz is great, but I'm accepting the other answer because it meets the requirement without any error.

|

Scott Sauyet · Accepted Answer · 2019-10-03 17:46:05Z

This is simply a refactoring of the answer from @user633183. I like that approach a lot, but think it can be simplified by extracting two more reusable functions. This started as a comment on that answer, but I thought it would be better to be explicit.

const map = (f) => (a) => 
  a.map(f)

const mapObj = (f) => (o) => 
  Object .entries (o) .reduce ( (a, [k, v] ) => ({ ...a, [k]: f(v) }), {})

const traverse = (f) => (t) =>
  Array.isArray(t)
    ? map (traverse (f)) (t)
  : Object(t) === t 
    ? mapObj (traverse (f)) (t)
  : f (t)

const input =
  { a: [ 1, 11, 111 ], b: { c: 2, d: { e: [ 3, { f: { g: 4 } } ] } } }

const output =
  traverse(x => `${x} a`) (input)

console.log(output)

mapObj can be written in many different ways. Here are two alternatives:

const mapObj = (f = identity) => (o = {}) => 
  Object .fromEntries (Object .entries (o) .map (([ k, v ]) => [ k, f (v) ]))


const mapObj = (f = identity) => (o = {}) => 
  Object .assign .apply (null, Object .entries (o) .map (([ k, v ]) => ({ [k]: f (v)

Sarah Groß · Accepted Answer · 2019-10-01 12:41:21Z

Here's an approach using a modification of the original code to demonstrate what needed to be changed in order to make it work. You had some things switched up reading the value and setting the new one. Also I'm using the spread operator to clone the object before modifying it.

const testObj = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3,
      f: {
        g: 4
      }
    }
  }
};

const newObject = object => {
  const clonedObj = { ...object };
  const entries = Object.entries(clonedObj);

  entries.forEach(([key, value]) => {
    if (typeof value === "object") {
      clonedObj[key] = newObject(value);
    } else {
      clonedObj[key] = value + " a";
    }
  });
  return clonedObj;
};
console.log(newObject(testObj));
console.log(testObj); // prove that the original object hasn't changed

Mulan · Accepted Answer · 2019-10-01 13:26:11Z

1

Here's a simple recursive technique. It is similar to Nina's but it preserves arrays, if present in the structure.

If the input, t, is an array, create a new array by traversing each array value, v, with the traversing function, f
(inductive) Otherwise t is not an array. If t is an object, create a new object from key value pairs, [ k, v ], by traversing each value, v, with the traversing function, f
(inductive) Otherwise t is not an array and t is not an object. This means t is either a primitive value, such as string, number, or null

Numbered comments below correspond to the explanation above -

const identity = x =>
  x

const traverse = (f = identity, t = {}) =>
  Array.isArray(t)                         // 1
    ? Array.from(t, v => traverse(f, v))
: Object(t) === t                          // 2
    ? Object.fromEntries(Object.entries(t).map(([ k, v ]) => [ k, traverse(f, v) ]))
: f (t)                                    // 3

const input =
  { a: [ 1, 11, 111 ], b: { c: 2, d: { e: [ 3, { f: { g: 4 } } ] } } }

const output =
  traverse(x => `${x} a`, input)

console.log(output)

answered Oct 1, 2019 at 13:26

Mulan

136k35 gold badges240 silver badges276 bronze badges

3 Comments

Scott Sauyet Over a year ago

A suggested refactoring: pull out a mapObject function to use in part 2. It's a nicely reusable function and makes the main code quite clean

Scott Sauyet Over a year ago

Note that 1 should be labeled as "inductive", not 3.

Mulan Over a year ago

thanks Scott. Your answer is a nice decomposition of the problem.

vincent · Accepted Answer · 2021-01-06 02:18:09Z

Here is a solution using object-scan. It works by building the solution at the same time as the input is traversed.

// const objectScan = require('object-scan');

const testObj = { a: 1, b: { c: 2, d: { e: 3, f: { g: 4 } } } };

const cloneAndModify = (obj) => objectScan(['**'], {
  breakFn: ({ property, value, isLeaf, context }) => {
    if (property === undefined) {
      return;
    }
    const ref = context[context.length - 1];
    if (!(property in ref)) {
      ref[property] = isLeaf ? `${value} a` : {};
    }
    context.push(ref[property]);
  },
  filterFn: ({ context }) => {
    context.pop();
  }
})(obj, [{}])[0];

const r = cloneAndModify(testObj);
console.log(r);
// => { b: { d: { f: { g: '4 a' }, e: '3 a' }, c: '2 a' }, a: '1 a' }

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

<script src="https://bundle.run/[email protected]"></script>

Disclaimer: I'm the author of object-scan

Collectives™ on Stack Overflow

update nested json object using recursion in JavaScript

5 Answers 5

7 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related