Transform an object with objects in it

Question

I have the following key/value object

form: {
  id: {value: this.item.id, hidden: true},
  title: {value: this.item.title},
  translations: {
    en: {
      locale: {value: 'en', hidden: true},
      name: {value: 'Hello World'}
    },
    nl: {
      locale: {value: 'nl', hidden: true},
      name: {value: 'Hallo Wereld'}
    }
  }
}

So each key has an object with a value and a hidden attribute, I'm stuck on how to achieve the following. Transform the nested object so each key just has it's value. Not the object with value and hidden. The big issue it seems for me is that it's nested.. So it has to work recursive.

This is the desired end result

form: {
  id: this.item.id,
  title: this.item.title,
  translations: {
    en: {
      locale: 'en',
      name: 'Hello World'
    },
    nl: {
      locale: 'nl',
      name: 'Hallo Wereld'
    }
  }
}

I've tried

Using a combination of Object.keys(form).map(...), which gives me the key of each item, but that's not going to work recursive I'm afraid.

Answer 1

function transform(obj) {
  return Object.entries(obj).reduce((newObj, [name, value]) => ({ ...newObj, [name]: value.value === undefined ? transform(value) : value.value  }), {})
}

const form = {
  id: {value: '77777', hidden: true},
  title: {value: '11111'},
  translations: {
    en: {
      locale: {value: 'en', hidden: true},
      name: {value: 'Hello World'}
    },
    nl: {
      locale: {value: 'nl', hidden: true},
      name: {value: 'Hallo Wereld'}
    }
  }
}

console.log(transform(form))

Explanation:

function transform(obj) {
  const entries = Object.entries(obj) // transform object to Array<[propertyName, propertyValue]>

  const tranformedObject = entries.reduce(reducer, {}) // inital value for the first arg of reducer is {}

  return tranformedObject
}

function reducer(newObj, [propertyName, propertyValue]) { // name 
  return {
    ...newObj, // get all properties (that we already set) from prev newObj
    [propertyName]: propertyValue.value === undefined ? transform(propertyValue) : propertyValue.value // if property has .value use it or use recursively tranformed object
  }  // returned value will be set to newObj, and than returned to tranformedObject
}

{ ...prop, [name]: vaue } - it's ES6 syntax