如何 map 嵌套 object 使用 map ( ES6 )？

Question

我有一个 javascript 复合体 Object。这是 Object：这是我从 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"
            }
        ]
    }
}

我想将这个 Object 转换成另一个包含：

{
    "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"
}

如何使用 map 做到这一点？

这是我想做的：

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

谢谢你的帮助

Answer 1

您也可以解构author_meta并使用属性的重命名。

获得 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

我们不能在这里使用.map()方法，因为它是一个数组方法，而post是一个 object。因此，我们可以简单地使用 map，例如：

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
}

演示：

 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

你不能在对象上使用.map ，但你可以直接访问道具。 这会给你预期的结果：

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

你可以改成

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)