转换其中包含对象的对象

Mig*_*ens 7 javascript ecmascript-6

我有以下键/值对象

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'}
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

因此,每个键都有一个带有值和隐藏属性的对象,我将坚持如何实现以下目标。 转换嵌套对象,以便每个键都具有它的值。不是具有价值和隐藏的对象。对我来说,最大的问题是它是嵌套的。因此它必须递归地工作。

这是理想的最终结果

form: {
  id: this.item.id,
  title: this.item.title,
  translations: {
    en: {
      locale: 'en',
      name: 'Hello World'
    },
    nl: {
      locale: 'nl',
      name: 'Hallo Wereld'
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

我试过了

使用Object.keys(form).map(...)的组合,它为我提供了每个项目的键,但是恐怕这将无法递归工作。

Ale*_*Owl 17

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))
Run Code Online (Sandbox Code Playgroud)

说明:

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
}
Run Code Online (Sandbox Code Playgroud)

{ ...prop, [name]: vaue }-这是ES6语法