How to add a property to every object in a nested JSON structure in JavaScript?

Question

Let's suppose I have an API response that looks like this:

const data = {
  users: [
    { name: "John", teams: [{ name: "Liverpool" }] },
    { name: "Sam", teams: [{ name: "MC" }, { name: "United" }] },
  ],
  photos: [
    { id: "123", types: ["JPG", "PNG"], comments: [{ description: "sample photo" }] },
  ],
};

I want to transform it by adding the rid property to each object.

const data = {
  rid: "ABC",
  users: [
    { rid: "ABC", name: "John", teams: [{ rid: "ABC", name: "Liverpool" }] },
    { rid: "ABC", name: "Sam", teams: [{ rid: "ABC", name: "MC" }, { rid: "ABC", name: "United" }] },
  ],
  photos: [
    { rid: "ABC", id: "123", types: ["JPG", "PNG"], comments: [{ rid: "ABC", description: "sample photo" }] },
  ],
};

How can I do so? I think there is some kind of recursion involved but I haven't been able to draft a solution?

Thanks.

Answer 1

First off, in StackOverflow, you should always show your own work. Even if you weren't able to get a complete solution, please show us what you've tried and tell us where it seemed to go wrong. I would not be answering this question except that there are already two other reasonable answers here.

---

I have a strong aversion to modifying input data, so I wrote a version that creates a copy with that property included on all Object nodes. It looks like this:

const addProp = (name, val) => (o) =>
  Array .isArray (o)
    ? o .map (addProp (name, val))
  : Object (o) === o
    ? Object .fromEntries ([
        [name, val], 
        ...Object .entries (o) .map (([k, v]) => [k, addProp (name, val) (v)])
      ])
  : o

const data = {users: [{name: "John", teams: [{name: "Liverpool"}]}, {name: "Sam", teams: [{name: "MC"}, {name: "United"}]},], photos: [{id: "123", types: ["JPG", "PNG"], comments: [{description: "sample photo"}]}]}

console .log (addProp ('rid', 'ABC') (data))

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

We process in three ways, based on whether our input is an Array, an Object, or something else. If it's neither, we return the value intact. If it's an array, we map a recursive call to the same function over its values. For an object, we split it into name-value pairs, mapping the values with a recursive call and adding one for our new property, then we fold these name-value entries back into an object.

Answer 2

Firstly the OP is not going to alter a JSON object. JSON is a string based standardized data interchange format and a JavaScript namespace with static methods.

But the OP is going to recursively traverse/walk a JSON-conform object-type.

Thus the implementation of such a function needs to take into account just object-types and arrays.

In case of an array-type the recursive call takes place forEach array-item. In case of an object-type all values of the object's own enumerable keys/properties will be processed recursively.

For any object-type in addition the assignment of a provided custom object (one or more entries) takes place.

The beneath provided function provides as feature the possibility to define the minimum object-level from where an assignement is going to be applied.

function recursivelyAssignDataToEveryObjectType(type, data, startLevel = 0, level = 0) {
  if (Array.isArray(type)) {
    type
      .forEach(item =>
        recursivelyAssignDataToEveryObjectType(item, data, startLevel, level + 1)
      );
  } else if (type && 'object' === typeof type) {
    Object
      .values(type)
      .forEach(value =>
        recursivelyAssignDataToEveryObjectType(value, data, startLevel, level + 1)
      );
    if (level >= startLevel) {
      Object.assign(type, data);
    }
  }
}

const data = {
  users: [
    { name: "John", teams: [{ name: "Liverpool" }] },
    { name: "Sam", teams: [{ name: "MC" }, { name: "United" }] },
  ],
  photos: [
    { id: "123", types: ["JPG", "PNG"], comments: [{ description: "sample photo" }] },
  ],
};
recursivelyAssignDataToEveryObjectType(data, { rid: "ABC" }, 2);

console.log({ data });

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

Answer 3

You just need to iterate through object with recursive function.

Try below snippet.

const data = {
  users: [
    { name: 'John', teams: [{ name: 'Liverpool' }] },
    { name: 'Sam', teams: [{ name: 'MC' }, { name: 'United' }] },
  ],
  photos: [
    { id: '123', types: ['JPG', 'PNG'], comments: [{ description: 'sample photo' }] },
    { key: null }, // Fixed null values
  ],
}

function addProperty(obj, key, val) {
  if (!obj || typeof obj !== 'object') return
  if (!Array.isArray(obj)) obj[key] = val
  Object.values(obj).forEach((obj) => addProperty(obj, key, val))
}

addProperty(data, 'rid', 'ABC')

console.log(data)