return specific properties from array of objects into new object

Question

I've an array of objects, what I want is to copy all the objects from that, but with specific properties not all the properties. like for example I've this object named cart

cart = [
    { id: 1, name: 'makeup', price: 200, qty: 1 },
    { id: 2, name: 'gloves', price: 300, qty: 2 },
    { id: 3, name: 'sanitizer', price: 400, qty: 3 },
    { id: 4, name: 'book', price: 100, qty: 1 },
    { id: 5, name: 'hairs', price: 250, qty: 4 },
    { id: 6, name: 'soap', price: 50, qty: 5 },
    { id: 7, name: 'shampoo', price: 700, qty: 1 },
  ]

and I want to extract only the id and qty attributes to a new array of objects. How do I do this. I already tried products=cart.map(prod=>prod.id, prod.qty) but this doesn't seems to be working. Thanks in advance to helping hands

have you looked at the [documentation for Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)? — Dan O, Apr 01 '20 at 14:25

score 1 · Answer 1 · answered Apr 01 '20 at 14:26

You need to iterate and return only the desired properties.

cart = [
    { id: 1, name: 'makeup', price: 200, qty: 1 },
    { id: 2, name: 'gloves', price: 300, qty: 2 },
    { id: 3, name: 'sanitizer', price: 400, qty: 3 },
    { id: 4, name: 'book', price: 100, qty: 1 },
    { id: 5, name: 'hairs', price: 250, qty: 4 },
    { id: 6, name: 'soap', price: 50, qty: 5 },
    { id: 7, name: 'shampoo', price: 700, qty: 1 },
  ]
  
const newcart = cart.map(item => {
  return {id: item.id, qty: item.qty}
  });

console.log(newcart)

score 1 · Answer 2 · answered Apr 01 '20 at 14:30

You almost had it correct.

When using arrow functions without the brackets, whatever is put after the arrow function is returned. So your code could look like this:

const products = cart.map(({ id, qty }) => ({ id, qty }));

We destructure the object in the arrow function and return it as a new object.

Make sure to have the round brackets around the value that you return. Otherwise javascript will see it as the body of a function instead of an object that is returned.

score 1 · Accepted Answer · answered Apr 01 '20 at 14:31

1

You can Array.prototype.map() or Array.prototype.reduce() over the entire array and only return the values you want.

const cart = [
  { id: 1, name: 'makeup', price: 200, qty: 1 },
  { id: 2, name: 'gloves', price: 300, qty: 2 },
  { id: 3, name: 'sanitizer', price: 400, qty: 3 },
  { id: 4, name: 'book', price: 100, qty: 1 },
  { id: 5, name: 'hairs', price: 250, qty: 4 },
  { id: 6, name: 'soap', price: 50, qty: 5 },
  { id: 7, name: 'shampoo', price: 700, qty: 1 },
]
console.log( cart.map( elem => ({id:elem.id, qty : elem.qty})))

answered Apr 01 '20 at 14:31

mgreif

131
6

is there any way during this process I can rename my variable `qty` to `quantity` ? – Lint Apr 01 '20 at 17:17
console.log( cart.map( elem => ({id:elem.id, quantity: elem.qty}))) – Jasdeep Singh Apr 01 '20 at 17:51

Zuckerberg · Answer 4 · 2020-04-02T11:57:43.400

1

You can update your .map() method like this to acheive the desired result:

const cart = [{id:1,name:"makeup",price:200,qty:1},{id:2,name:"gloves",price:300,qty:2},{id:3,name:"sanitizer",price:400,qty:3},{id:4,name:"book",price:100,qty:1},{id:5,name:"hairs",price:250,qty:4},{id:6,name:"soap",price:50,qty:5},{id:7,name:"shampoo",price:700,qty:1}];

const products = cart.map(({id, qty}) => ({ id, quantity: qty }))
console.log(products)

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Apr 02 '20 at 11:57

answered Apr 01 '20 at 14:33

Zuckerberg

1,781
2
10
19

is there any way during this process I can rename my variable `qty` to `quantity` ? – Lint Apr 01 '20 at 17:17
1

Yes, you can simply do `cart.map(({id, qty}) => ({ id, quantity: qty }))`. I have updated the demo also. Hope it helps! – Zuckerberg Apr 02 '20 at 11:56

return specific properties from array of objects into new object

4 Answers4