使用reduce轉換a 2 js object 2 1

Question

我想寫一個 function 來傳輸這個對象

const input1 = [
  {
    id: "lkhj68C13h8uWh4RJz7",
    post: "on XSS attacks",
    gender: "Littérature",
    postId: "cxTbP5EZjNCxw7rD60L7",
  },
  {
    id: "Kek4ulyC13h8uWh4RJz7",
    post: "The Maze",
    gender: "Littérature",
    postId: "cxTbP5EZjNCxw7rD60L7",
  },
  {
    id: "arfstlyC13h8uWh4RJz7",
    post: "Runner",
    gender: "Littérature",
    postId: "92poye7CF0aprDKcYh1Q",
  },
];

const input2 = [
  {
    postId: "92poye7CF0aprDKcYh1Q",
    postName: "Attalib",
    postUrl: "attalib",
    ville: "Casablanca",
  },
  {
    postId: "cxTbP5EZjNCxw7rD60L7",
    postName: "Atlas",
    postUrl: "atlas",
    ville: "Casablanca",
  },
];

成為那樣的東西

const output = [
  {
    postId: "92poye7CF0aprDKcYh1Q",
    postName: "Attalib",
    postUrl: "attalib",
    ville: "Casablanca",
    posts: [
      {
        id: "arfstlyC13h8uWh4RJz7",
        post: "Runner",
        gender: "Littérature",
      },
    ],
  },
  {
    postId: "cxTbP5EZjNCxw7rD60L7",
    postName: "Atlas",
    postUrl: "atlas",
    ville: "Casablanca",
    posts: [
      {
        id: "Kek4ulyC13h8uWh4RJz7",
        post: "The Maze",
        gender: "Littérature",
      },
      {
        id: "lkhj68C13h8uWh4RJz7",
        post: "on XSS attacks",
        gender: "Littérature",
      },
    ],
  },
];

我嘗試使用 Array.reduce，但我不知道如何渲染它。 如果有人對此有任何后見之明，我想使用 postid 合並兩個輸入，那么我可以使用 map 循環或減少嗎，如果有人可以幫助我這樣做，我將非常感激，如果你有任何減少/映射教程

Answer 1

您可以采用兩個循環的方法並收集按其postId和 map 分組的所有帖子，另一個數組並添加帖子。

 const input1 = [{ id: "lkhj68C13h8uWh4RJz7", post: "on XSS attacks", gender: "Littérature", postId: "cxTbP5EZjNCxw7rD60L7" }, { id: "Kek4ulyC13h8uWh4RJz7", post: "The Maze", gender: "Littérature", postId: "cxTbP5EZjNCxw7rD60L7" }, { id: "arfstlyC13h8uWh4RJz7", post: "Runner", gender: "Littérature", postId: "92poye7CF0aprDKcYh1Q" }], input2 = [{ postId: "92poye7CF0aprDKcYh1Q", postName: "Attalib", postUrl: "attalib", ville: "Casablanca" }, { postId: "cxTbP5EZjNCxw7rD60L7", postName: "Atlas", postUrl: "atlas", ville: "Casablanca" }], posts = input1.reduce((r, o) => ((r[o.postId]??= []).push(o), r), {}), result = input2.map(o => ({...o, posts: posts[o.postId] || [] })); console.log(result);

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

Answer 2

 const input1 = [ { id: "lkhj68C13h8uWh4RJz7", post: "on XSS attacks", gender: "Littérature", postId: "cxTbP5EZjNCxw7rD60L7", }, { id: "Kek4ulyC13h8uWh4RJz7", post: "The Maze", gender: "Littérature", postId: "cxTbP5EZjNCxw7rD60L7", }, { id: "arfstlyC13h8uWh4RJz7", post: "Runner", gender: "Littérature", postId: "92poye7CF0aprDKcYh1Q", }, ]; const input2 = [ { postId: "92poye7CF0aprDKcYh1Q", postName: "Attalib", postUrl: "attalib", ville: "Casablanca", }, { postId: "cxTbP5EZjNCxw7rD60L7", postName: "Atlas", postUrl: "atlas", ville: "Casablanca", }]; const final = input2.reduce((acc, current) => { let filtered = input1.filter(obj => obj.postId === current.postId).map(({id, post, gender, postId}) => { return {id, post, gender}}); current.posts = filtered; acc.push(current); return acc; }, []); console.log(final)

Answer 3

您的問題措辭相當糟糕，但我假設您嘗試做的是使用postId將input1數據分配給input2內的對象。 你正在做的事情有點復雜而且不是很簡單，所以最好只在 for 循環或 forEach 循環中進行操作。

這是一個快速而骯臟的輪廓：

for x in objects in input1 {

    //get the postId

    for y in objects in input2 {
    
        //if an object contains the postId from x, add a new property to y with that information
    }
}

如果您正在尋找如何使用Array.reduce或Array.map ，您可以查看Mozilla 參考或W3Schools 的解釋。

下次您提出問題時，請嘗試將其簡化為您遇到的最基本的問題。 請記住，Google 是您最好的朋友。 祝你好運！

Answer 4

為您的目標類型添加一個接口。

如果要使用未知屬性，請使用：

interface LooseObject {
    [key: string]: any
}

最后：

const output: LooseObject[] = [];

input2.forEach(f => {
  const post: LooseObject = f;
  post.posts = input1.filter(f => f.postId === post.postId);
  output.push(post);
})

在TypeScriptPlayground進行演示。