javascript - 如何合并这些父/子 javascript 对象?

标签 javascript json

我正在使用两个 json API 端点,一个返回“帖子”,另一个返回与帖子关联的“评论”。示例:

/*posts*/
[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  }
]

/*comments*/
[
  {
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
  },
  {
    "postId": 1,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
  },
  {
    "postId": 1,
    "id": 3,
    "name": "odio adipisci rerum aut animi",
    "email": "Nikita@garfield.biz",
    "body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
  }
]

我的最终结果应该是(使用第一篇文章作为模板):

[
   {
      "userId":1,
      "id":1,
      "title":"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body":"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
      "comments":[
         {
            "postId":1,
            "id":1,
            "name":"id labore ex et quam laborum",
            "email":"Eliseo@gardner.biz",
            "body":"laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
         },
         {
            "postId":1,
            "id":2,
            "name":"quo vero reiciendis velit similique earum",
            "email":"Jayne_Kuhic@sydney.com",
            "body":"est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
         },
         {
            "postId":1,
            "id":3,
            "name":"odio adipisci rerum aut animi",
            "email":"Nikita@garfield.biz",
            "body":"quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
         }
      ]
   }
]

有什么好的方法可以做到这一点?我以前从未需要像这样合并对象。

最佳答案

只要使用ES6

const result = postsList.map(post => {
    const comments = commentsList.filter(({ postId }) => postId === post.id);

    return { ...post, comments };
});

关于javascript - 如何合并这些父/子 javascript 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58370458/

相关文章:

javascript - 根据长度在文本输入上调用angularjs函数

javascript - react native 启动意外 token

javascript - 为什么 promise 在声明时执行?

json.Unmarshal 似乎不关注结构标签

c# - 如何反序列化没有名称的 JSON 数组?

json - 如何在 JSON 发现报告中使用 Jora 提取特定 key

javascript - `throw new Error(' 在Next.JS中设置')`中的`fallback: true`时无法加载静态 Prop `getStaticPaths`

java - Jettison 或 Kryo

json - 从 Controller 获取尚未渲染的模板

javascript - 如何使用 Tampermonkey 在 React 应用程序中模拟点击?