How to map nested object using map ( ES6 )?

Question

I have a javascript complex Object. Here is the Object: it's a content post i got from rest api:

{
    "id": 2598,
    "date": "2018-10-15T06:20:10",
    "date_gmt": "2018-10-15T06:20:10",
    "modified": "2019-05-16T23:35:50",
    "modified_gmt": "2019-05-16T21:35:50",
    "slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
    "status": "publish",
    "type": "post",
    "link": "http://www.website.org/2018/10/15/lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit/",
    "title": {
        "rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
    },
    "content": {
        "rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
        "protected": false
    },
    "author_meta": {
        "ID": "1",
        "user_nicename": "megmail-com",
        "user_email": "me@gmail.com",
        "user_registered": "2018-12-31 08:16:31",
        "display_name": "me@gmail.com",
        "first_name":"John",
        "last_name": "DOE"
    },
    "_links": {
        "self": [
            {
                "href": "http://www.website.org/wp-json/wp/v2/posts/2598"
            }
        ]
    }
}

I want to transform this Object into another containing:

{
    "id": 2598,
    "date": "2018-10-15T06:20:10",
    "slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
    "title": {
        "rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
    },
    "content": {
        "rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
        "protected": false
    },
    "authorlastname": "John",
    "authorfirstname": "DOE"
}

How to do it using map?

Here what i would like to do:

post = post
        .map(({ id, slug, title, date, content, authorlastname,  authorfirstname,
                  }) => ({
          id,
          slug,
          title,
          excerpt,
          date,
          tags,
          content,
          ???, 
          ???
        }))

Thanks for your help

Answer 1

You could destructure author_meta as well and use a renaming of the properties.

For getting an object

const subset = ({
    id,
    slug,
    title,
    date,
    content,
    author_meta: { first_name: authorfirstname, last_name: authorlastname } 
}) => ({ 
    id,
    slug,
    title,
    excerpt,
    date,
    tags,
    content,
    authorlastname,
    authorfirstname
});

post = subset(post);

// if you have the objects in an array, you could map the new objects with
posts = posts(subset);

Answer 2

We can't use .map() method here as it is an array method and post is an object. So, we can simply map it like:

const result = {
  id: post.id,
  slug: post.slug,
  title: post.title,
  date: post.date,
  content: post.content,
  authorlastname: post.author_meta.last_name,
  authorfirstname: post.author_meta.first_name
}

Demo:

 const post = { "id": 2598, "date": "2018-10-15T06:20:10", "date_gmt": "2018-10-15T06:20:10", "modified": "2019-05-16T23:35:50", "modified_gmt": "2019-05-16T21:35:50", "slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit", "status": "publish", "type": "post", "link": "http://www.website.org/2018/10/15/lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit/", "title": { "rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit" }, "content": { "rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n", "protected": false }, "author_meta": { "ID": "1", "user_nicename": "megmail-com", "user_email": "me@gmail.com", "user_registered": "2018-12-31 08:16:31", "display_name": "me@gmail.com", "first_name": "John", "last_name": "DOE" }, "_links": { "self": [{ "href": "http://www.website.org/wp-json/wp/v2/posts/2598" }] } } const result = { id: post.id, slug: post.slug, title: post.title, date: post.date, content: post.content, authorlastname: post.author_meta.last_name, authorfirstname: post.author_meta.first_name } console.log(result)

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

Answer 3

You can not use .map on objects, but you can access the props directly. This will give you the expected result:

const {id, date, slug, title, content} = post

const newPost = {
  id,
  date,
  slug,
  title,
  content,
  authorlastname: post.author_meta.last_name,
  authorfirstname: post.author_meta.first_name
}

Answer 4

You can change to

var obj =(({ id, slug, title, date }) => ({id, slug, title, date }))(post);

 var post = { "id": 2598, "date": "2018-10-15T06:20:10", "date_gmt": "2018-10-15T06:20:10", "modified": "2019-05-16T23:35:50", "modified_gmt": "2019-05-16T21:35:50", "slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit", "status": "publish", "type": "post", "link": "http://www.website.org/2018/10/15/lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit/", "title": { "rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit" }, "content": { "rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n", "protected": false }, "author_meta": { "ID": "1", "user_nicename": "megmail-com", "user_email": "me@gmail.com", "user_registered": "2018-12-31 08:16:31", "display_name": "me@gmail.com", "first_name":"John", "last_name": "DOE" }, "_links": { "self": [ { "href": "http://www.website.org/wp-json/wp/v2/posts/2598" } ] } }; var obj =(({ id, slug, title, date }) => ({ id, slug, title, date, }))(post); console.log(obj)