Transforming Nested JavaScript Objects for Internationalization in Vue

Question

Transforming Nested JavaScript Objects for Internationalization in Vue

In my VUE JS web application that utilizes i18n-vue, I am facing an issue with reformatting a JS Object to work with the i18n-vue setup. The translations are retrieved from the database and are structured in a certain way as shown below.

I have tried several approaches but so far have not been successful in getting it to work properly.

The initial format looks like this:

{
 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'
   }
}

The desired format should be like this:

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

Any assistance on how to achieve this would be highly appreciated. While I am still learning JavaScript and have managed to solve many problems by reading resources like Stack Overflow, this particular issue has me stumped. Thank you in advance for your help!

javascript vue.js javascript-objects vue-i18n

Answer 1

Answer №1

Assuming that the input provided is in object form, utilizing the .reduce() method can serve as a means to modify the object into a different structure.

Feel free to execute the code snippet below to observe the outcome:

const data = {
 0:{
     info: {
       0: { name: 'John', age: 30 },
       1: { name: 'Sarah', age: 25 },
       2: { name: 'Tom', age: 35 }
     },
     group: 'A'
 },
 1:{
     info: {
       0: { name: 'Alice', age: 28 },
       1: { name: 'Bob', age: 32 },
       2: { name: 'Eve', age: 27 }
     },
     group: 'B'
   }
}

/* Transformation process */
const modifiedData = Object.keys(data).reduce((modifiedObj, key) => {
  const { info, group } = data[key]

  // Modify information to show { 'John': 30 }
  const updatedInfo = Object.keys(info).reduce((infoObj, infoKey) => {
     const { name, age } = info[infoKey]
     return ({ ...infoObj, [name]: age })
  }, {})

  
  return ({ ...modifiedObj, [group]: updatedInfo })
}, {})

console.log(modifiedData)

Answer 2

Assuming that the input provided is in object form, utilizing the .reduce() method can serve as a means to modify the object into a different structure.

Feel free to execute the code snippet below to observe the outcome:

const data = {
 0:{
     info: {
       0: { name: 'John', age: 30 },
       1: { name: 'Sarah', age: 25 },
       2: { name: 'Tom', age: 35 }
     },
     group: 'A'
 },
 1:{
     info: {
       0: { name: 'Alice', age: 28 },
       1: { name: 'Bob', age: 32 },
       2: { name: 'Eve', age: 27 }
     },
     group: 'B'
   }
}

/* Transformation process */
const modifiedData = Object.keys(data).reduce((modifiedObj, key) => {
  const { info, group } = data[key]

  // Modify information to show { 'John': 30 }
  const updatedInfo = Object.keys(info).reduce((infoObj, infoKey) => {
     const { name, age } = info[infoKey]
     return ({ ...infoObj, [name]: age })
  }, {})

  
  return ({ ...modifiedObj, [group]: updatedInfo })
}, {})

console.log(modifiedData)

Transforming Nested JavaScript Objects for Internationalization in Vue

Answer №1

Similar questions

After compiling my project using npm run dev, Vue 3 throws an error

Angular HttpClient does not support cross-domain POST requests, unlike jQuery which does

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

transferring data between react components

How can I integrate both the ui-bootstrap datepicker and timepicker in an AngularJS application?

Is it possible to scroll a div on mobile without the need for jQuery plugins?

Tips for refreshing the <img> tag using a user image

Exploring the Vanilla JavaScript alternative to the jQuery.each() function

Error encountered during Atom execution - The command '/usr/bin/env: 'node' was not found in the directory

Mastering the Art of Crafting an Effortless Slide Showcase

Tips for posting images upon clicking a div instead of a submit button

Tips for retrieving the clicked word in JavaScript

What is the trick to have a CSS element overflow the boundaries of its containing div entirely?

How can I incorporate the `name` parameter into a `redirect` URL using vue-router?

passing JSON data using JavaScript or jQuery

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?

Invoke a function in a different component following the completion of an asynchronous task in a React.js application

The compatibility issue between Vue 2.6.12 and Laravel is causing difficulties for FullCalendar to function properly

Turn off email alerts for items and folders in ALFRESCO 5.2

Why is it that when I refresh the page in Angular, my logged-in user is not being recognized? What could be causing this