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": "[email protected]",
        "user_registered": "2018-12-31 08:16:31",
        "display_name": "[email protected]",
        "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

Nina Scholz · Accepted Answer · 2020-04-13 13:53:05Z

2

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);

edited Apr 13, 2020 at 13:53

answered Apr 13, 2020 at 13:46

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

2 Comments

Andreas Over a year ago

You can not use .map on objects!

Nina Scholz Over a year ago

@andreas, right. please see edit. op's question is a bit misleading.

palaѕн · Accepted Answer · 2020-04-13 13:46:25Z

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": "[email protected]",
    "user_registered": "2018-12-31 08:16:31",
    "display_name": "[email protected]",
    "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; }

Andreas · Accepted Answer · 2020-04-13 13:47:00Z

0

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
}

answered Apr 13, 2020 at 13:47

Andreas

4756 silver badges30 bronze badges

Comments

Hien Nguyen · Accepted Answer · 2020-04-13 13:48:23Z

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": "[email protected]",
        "user_registered": "2018-12-31 08:16:31",
        "display_name": "[email protected]",
        "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)

Collectives™ on Stack Overflow

How to map nested object using map ( ES6 )?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related