Transforming array into a object in JavaScript

Question

I am trying to convert an array into a javscript object that is designed to work with input checkboxes in AngularJS.

This is the input array that I get from my backend:

let selectedRolesDB = ['ADMIN', 'SECURITY'];

This is what my front-end expects:

let selectedRoles =
  {
    'ADMIN' : true,
    'SECURITY': true
  };

I tried different approaches such as angular.forEach but the problem is that I am not able to get the desired output:

angular.forEach(selectedRolesDB,(value, key) => {
    this.selectedRoles.push({value : true });
});

Can anyone tell me how I best solve my problem so I end up with the array that my front-end expects?

JSFiddle

u_mulder · Accepted Answer · 2018-03-13 11:38:40Z

3

selectedRoles is not array, it is object. Init it as empty object:

let selectedRoles = {};

angular.forEach(selectedRolesDB,(value, key) => {
    // use [] notation to add property with required name and value
    selectedRoles[value] = true;
});

answered Mar 13, 2018 at 11:38

u_mulder

54.8k5 gold badges54 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ben · Accepted Answer · 2018-03-13 11:37:26Z

3

Use array.reduce :

    let selectedRolesDB = ['ADMIN', 'SECURITY'];
    const newArray = selectedRolesDB.reduce((accumulator, value) => {
       accumulator[value] = true;
       return accumulator;
    }, {});
    
    console.log(newArray)

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce for documentation about it.

answered Mar 13, 2018 at 11:37

ben

3,5781 gold badge18 silver badges29 bronze badges

2 Comments

Titian Cernicova-Dragomir Over a year ago

The question is marked with typescript, for typescript, you should also declare the type of the accumulator as depending on compiler flags you will get an error otherwise:

const newArray = selectedRolesDB.reduce<{ [role: string]: boolean }>((accumulator, value) => {    accumulator[value] = true;    return accumulator; }, {});

ben Over a year ago

Indeed, @TitianCernicova-Dragomir, however (according to the code provided in the question), the ts compiler does not use any specific flag and seems very permissive (also we cannot write a snippet in typescript :( )

shohrukh · Accepted Answer · 2018-04-02 00:03:22Z

0

Probably it would be much better to use array's native 'forEach' method (it has a good browser support, see here Array forEach). Also this will be helpful if you decide to migrate your project into Angular2+, so avoiding usages of 'angular.someMethod' is a better approach. This is a final solution:

const selectedRoles: {[key: string]: boolean} = {};
selectedRolesDB.forEach((value: string) => selectedRoles[value] = true);

answered Apr 2, 2018 at 0:03

shohrukh

3,2094 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

Transforming array into a object in JavaScript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related