JavaScript 为 i18n-vue 重新格式化嵌套对象

Question

我有一个 JS 对象，如第一个示例所示，在一个使用 i18n-vue 的 VUE JS Web 应用程序中。我的翻译存储在数据库中，检索时格式如下。

我需要重新格式化它才能与 i18n-vue 一起使用，但我没有运气让它工作。

我需要从这里开始：

{
 0:{
     directory: {
       0: { english: 'Home', value: 'Casa' }
       1: { english: 'News', value: 'Noticias' }
       2: { english: 'Contact', value: 'Contacto' }
     }
     locale: 'es'
   }
 1:{
     directory: {
       0: { english: 'Home', value: '家' }
       1: { english: 'News', value: '消息' }
       2: { english: 'Contact', value: '接触' }
     }
     locale: 'zh'
   }
}

为此：

{
 'es': {
   'Home': 'Casa',
   'News': 'Noticias',
   'Contact': 'Contacto',
  },
 'zh': {
   'Home': '家',
   'News': '消息',
   'Contact': '接触',
  },
}

非常感谢任何帮助。我仍在学习 JS 并且已经能够解决大多数阅读 SO 的问题，但是这个真的让我感到困惑。提前致谢！

Answer 1

我假设你输入的是一个对象，使用.reduce()可以将对象转换成另一种外观。

您可以运行代码段来查看结果

const translations = {
 0:{
     directory: {
       0: { english: 'Home', value: 'Casa' },
       1: { english: 'News', value: 'Noticias' },
       2: { english: 'Contact', value: 'Contacto' }
     },
     locale: 'es'
 },
 1:{
     directory: {
       0: { english: 'Home', value: '家' },
       1: { english: 'News', value: '消息' },
       2: { english: 'Contact', value: '接触' }
     },
     locale: 'zh'
   }
}

/* transformation */
const result = Object.keys(translations).reduce((translationObj, key) => {
  const { directory, locale } = translations[key]

  // transform directory to be { 'Home': 'Casa' }
  const directories = Object.keys(directory).reduce((directoryObj, directoryKey) => {
     const { english, value } = directory[directoryKey]
     return ({ ...directoryObj, [english]: value })
  }, {})

  
  return ({ ...translationObj, [locale]: directories })
}, {})

console.log(result)

JavaScript 为 i18n-vue 重新格式化嵌套对象

JavaScript Nested Objects Reformatting for i18n-vue

javascript

javascript-objects

vue.js

vue-i18n