JavaScript: Pick old array by key and rename the key in new array

Question

I have an array of objects and I want to "pick" a new array from the value of the key viewerId . I also want to change the name of the viewerId key to userId . Here is what I have done with lodash:

 const viewerList = [{ "id": 1, "viewerId": 5, "status": true }, { "id": 2, "viewerId": 8, "status": true }, { "id": 3, "viewerId": 6, "status": true }, { "id": 4, "viewerId": 9, "status": true } ] var result = [] _.each(viewerList, (o) => { result.push(_.pick(o, 'viewerId')) }) result = result.map(function(item) { return { userId: item.viewerId } }); console.log(result)

 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

I am doing this in two steps. Can this be optimized?

Answer 1

You could do the following in a single statement:

 const viewerList = [{ "id": 1, "viewerId": 5, "status": true }, { "id": 2, "viewerId": 8, "status": true }, { "id": 3, "viewerId": 6, "status": true }, { "id": 4, "viewerId": 9, "status": true } ] // The same logic in a single statement var result = viewerList.map(function(item) { return { userId : item.viewerId} }) console.log(result)

This work on all browsers ie9 and up. For more information on the .map() function being used, see this

Answer 2

For this purpose, using map would be the proper way to handle it, as you are transforming the existing data.

Therefore, you don't even need lodash .

You can take advantage of destructuring and renaming in the same step:

const result = viewerList.map(({ viewerId: userId }) => ({ userId }))

Answer 3

you can use this

viewerList.map(({viewerId}) => ({userId: viewerId}))

or in lodash

_.map(viewerList, ({viewerId}) => ({userId: viewerId}))