Reconfigure an ancestral item into a designated key

Question

Reconfigure an ancestral item into a designated key

I have a single object with an array of roles inside, and I need to transform the roles into an array of objects. See example below:

Current Object:

displayConfiguration: {
  widgetList: {
    widgetName: 'widget title',
    entityType: 'Asset',
    roles: [202]
  },
  addIcon: {
    fileName: '',
    fileDownloadUri: ''
  },
  displayInfoIcon: {
    visible: true,
    summaryText: 'info icon text'
  },
  useFilter: true
}

Expected Object:

displayConfiguration: {
  widgetList: {
    widgetName: 'widget title',
    entityType: 'Asset',
    roles: [
      {
        id: 202
      }
    ]
  },
  addIcon: {
    fileName: '',
    fileDownloadUri: ''
  },
  displayInfoIcon: {
    visible: true,
    summaryText: 'info icon text'
  },
  useFilter: true
}

javascript angular typescript

Answer 1

Answer №1

const setup = {
  componentList: {
    componentName: 'component name',
    moduleType: 'Module',
    permissions: [104]
  },
  addButton: {
    fileName: '',
    fileLink: ''
  },
  displayHelpIcon: {
    active: true,
    infoMessage: 'helpful message'
  },
  applyFilter: true
}

const result = {
  ...setup, 
  componentList: {
    ...setup.componentList,
    permissions: setup.componentList.permissions.map(x => ({id: x}))
  }
  
}

console.log(result)

Transforming arrays using the map function is a simple and effective method.

Answer 2

const setup = {
  componentList: {
    componentName: 'component name',
    moduleType: 'Module',
    permissions: [104]
  },
  addButton: {
    fileName: '',
    fileLink: ''
  },
  displayHelpIcon: {
    active: true,
    infoMessage: 'helpful message'
  },
  applyFilter: true
}

const result = {
  ...setup, 
  componentList: {
    ...setup.componentList,
    permissions: setup.componentList.permissions.map(x => ({id: x}))
  }
  
}

console.log(result)

Transforming arrays using the map function is a simple and effective method.

Answer 3

Answer №2

One way to achieve this is by using the .map() function, which will iterate through each element and transform your number into the desired object.

const displayConfiguration = {
  widgetList: {
    widgetName: 'widget tiltle',
    entityType: 'Asset',
    roles: [202]
  },
  addIcon: {
    fileName: '',
    fileDownloadUri: ''
  },
  displayInfoIcon: {
    visible: true,
    summaryText: 'info icon text'
  },
  useFilter: true
};

const roles = displayConfiguration.widgetList.roles;
displayConfiguration.widgetList.roles = roles.map(role => {
 return {
  id: role
 }
})

console.log(displayConfiguration);

The map function generates a new array with the results of applying a specified function to each element in the original array.

Answer 4

One way to achieve this is by using the .map() function, which will iterate through each element and transform your number into the desired object.

const displayConfiguration = {
  widgetList: {
    widgetName: 'widget tiltle',
    entityType: 'Asset',
    roles: [202]
  },
  addIcon: {
    fileName: '',
    fileDownloadUri: ''
  },
  displayInfoIcon: {
    visible: true,
    summaryText: 'info icon text'
  },
  useFilter: true
};

const roles = displayConfiguration.widgetList.roles;
displayConfiguration.widgetList.roles = roles.map(role => {
 return {
  id: role
 }
})

console.log(displayConfiguration);

The map function generates a new array with the results of applying a specified function to each element in the original array.

Reconfigure an ancestral item into a designated key

Answer №1

Answer №2

Similar questions

Is it possible to add a click handler function to a dynamically generated link in Vue?

Adding a character to an AngularJS textbox

The issue of why iterating over an array of objects does not function properly in React JS

Is Typescript capable of converting ES6 code to ES5 during transpilation?

Easy selector for choosing jquery css backgrounds

What are the steps to take in order to successfully deploy an Express server on GitHub Pages?

Getting permission for geoLocation service on iOS in Ionic: A step-by-step guide

Is there a way to retrieve a singular value from various select options sharing the same name within a single form?

Using a loop to chain jQuery's .when().then() method and ensuring a fixed final call at the end of the

Analyzing various field data collectively

Adding a break in a CardHeader element subtitle in MaterialUI using ReactJS

Creating custom shaders for YouTube videos within a Three.js userscript

Using JavaScript, create a set of buttons within a div element and implement

Struggling with establishing recognition of a factory within an Angular controller

Encountering error while attempting POST request in POSTMAN - "Unable to modify in restricted editor."

JavaScript seems to have difficulty correctly parsing objects from JSON

What is the best way to streamline a state-dependent getter, with a focus on adhering to SOLID principles?

Can the Angular link function activate the change event?

Creating an Injectable AppSettings Class in Angular 2

The ajaxStart event does not seem to be triggering when clicked on