CODEWITHSUNDEEP
javascriptjsonecmascript-6
Pracede
Pracede

Reputation: 4361

How to map nested object using map ( ES6 )?

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

Upvotes: 0

Views: 69

Answers (4)

Nina Scholz
Nina Scholz

Reputation: 386540

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

Upvotes: 2

Hien Nguyen
Hien Nguyen

Reputation: 18975

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)

Upvotes: -1

Andreas
Andreas

Reputation: 473

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
}

Upvotes: 0

palaѕн
palaѕн

Reputation: 73896

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

Upvotes: 0

Related Questions