How to Extract Key Values from an Object Array

Question

I have an array of objects which are formatted like this:

{
    "gallery": [{
        "id": 606,
        "status": 1,
        "name": "00000000606.png",
        "title": "splash.png",
        "location": "",
        "caption": "",
        "type": "image/png",
        "charset": "binary",
        "tags": "",
        "width": 2732,
        "height": 2732,
        "size": 476358,
        "embed_id": null,
        "user": 1,
        "date_uploaded": "2019-09-26T05:22:31-04:00",
        "storage_adapter": "local",
        "url": "/storage/uploads/00000000606.png",
        "thumbnail_url": "/storage/uploads/thumbs/606.png",
        "old_thumbnail_url": "/storage/uploads/thumbs/00000000606-png-160-160-true.jpg",
        "html": null
    }, {
        "id": 610,
        "status": 1,
        "name": "00000000610.png",
        "title": "icon.png",
        "location": "",
        "caption": "",
        "type": "image/png",
        "charset": "binary",
        "tags": "",
        "width": 1024,
        "height": 1024,
        "size": 274477,
        "embed_id": null,
        "user": 1,
        "date_uploaded": "2019-09-26T06:43:44-04:00",
        "storage_adapter": "local",
        "url": "/storage/uploads/00000000610.png",
        "thumbnail_url": "/storage/uploads/thumbs/610.png",
        "old_thumbnail_url": "/storage/uploads/thumbs/00000000610-png-160-160-true.jpg",
        "html": null
    }]
}

What I would like to do is set the data for posting as follows:

{
    gallery: [
        {id: 606},
        {id: 610}
    ]
}

I have tried to do:

const imageId = this.selectedGallery.map(({id}) => id );

then setting the gallery array like this:

{
  gallery: [
      {id: imageId},
  ]
}

this posts the full array to id: and fails.

How would I approach this?

If you want to post the answer I can then tick it to give people a view that this has been resolved. — Apex
– Apex, Commented Sep 26, 2019 at 13:40
@AdritaSharma no problem, remember that this syntax is just a shortcut for quick object manipulation, but not for data manipulation — user4676340
– user4676340, Commented Sep 26, 2019 at 13:51

user4676340 · Accepted Answer · 2019-09-26 13:50:43Z

When you use that kind of one-liner, you have a specific syntax to follow :

.map(   (   {   id   }   )   =>   (   {   id   }   )   );
 _|_   _|_ _|_  _|_         _|_  _|_ _|_  _|_
  1     2   3    4           5    6   7    8

1 - the operator you are going to use

2 - the parenthesis that will be used to contain your parameters declaration. You can omit it if you have a single parameter. In TS, if you type it, you're forced to put the parenthesis anyway.

3 - The deconstruction bracket. Between those brackets, you can selectively pick properties in your object. In your case, you are picking only the ID.

4 - the properties to pick (1 or more, comma separated)

5 - The fat arrow to write a one-liner

6 - The evaluating parenthesis : this one is a bit tricky, a Stack answer wouldn't even be enough to explain it. The best to understand it is to play with it. In this case, see that parenthesis as a way of returning an object : since the function body (function() {}) and object declaration (obj = {}) use the same bracketed-syntax, the parenthesis changes it to return an object instead of a function body.

7 - the bracket for the object declaration

8 - the properties to use. When writing a single property ({ id } instead of { id: id }), it simply reduces the syntax but prevents from doing changes to that variable.

The final syntax would then be

.map(({ id }) => ({ id }))

Collectives™ on Stack Overflow

How to Extract Key Values from an Object Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related