首页 / 技术问答 / Javascript问答列表 / 问答详情

在javascript中重组数据数组并通过传递动态值将函数创建为可重用的函数

嗨，我有一个这样的数组

Given Data个

[
  {
    "id": "Client 1",
    "mName": "SDk",
    "cName": "Thor Odin",
    "gName": "",
    "gAmt": 80000,
    "gls": 2,
    "value": 0.855,
    "date": "22/1/2022",
    "income": "",
    "subRows": [
      {
        "id": "goal-1",
        "cName": "",
        "mName": "",
        "gName": "Retirement1",
        "gAmt": 10000,
        "gls": 1,
        "income": "60/40",
        "date": "22/1/2022",
        "value": 0.99
      },
      {
        "id": "goal-2",
        "cName": "",
        "mName": "",
        "gName": "Save For Child Education",
        "gAmt": 70000,
        "gls": 1,
        "income": "55/45",
        "date": "5/12/2023",
        "value": 0.72
      }
    ]
  },
  {
    "id": "Client 2",
    "mName": "SDk",
    "cName": "Steve Rogers",
    "gName": "Save for Investment",
    "gAmt": 67000,
    "gls": 1,
    "value": 0.7,
    "date": "22/1/2022",
    "income": "60/40"
  },
  {
    "id": "Client 3",
    "mName": "Pal",
    "cName": "Wanda Vision",
    "gls": 0,
    "value": 0.9,
    "date": "",
    "income": ""
  },
  {
    "id": "Client 4",
    "mName": "Pal",
    "cName": "Tony Stark",
    "gName": "",
    "gAmt": 23500,
    "gls": 2,
    "value": 0.29,
    "date": "27/10/2019",
    "income": "",
    "subRows": [
      {
        "id": "goal-4",
        "cName": "",
        "mName": "",
        "gName": "Education Loan",
        "gAmt": 500,
        "gls": 1,
        "income": "60/40",
        "date": "27/10/2019",
        "value": 0.29
      },
      {
        "id": "goal-5",
        "cName": "",
        "mName": "",
        "gName": "House Loan",
        "gAmt": 23000,
        "gls": 1,
        "income": "30/70",
        "date": "16/6/2022",
        "value": 0.29
      }
    ]
  },
  {
    "id": "Client 5",
    "mName": "Joe",
    "cName": "Hack Eye",
    "gName": "Save For World Tour",
    "gAmt": 400000,
    "gls": 1,
    "value": 0.74,
    "date": "",
    "income": "60/40"
  },
  {
    "id": "Client 6",
    "mName": "Joe",
    "cName": "Nick Fury",
    "gName": "",
    "gAmt": 51070,
    "gls": 2,
    "value": 0.44499999999999995,
    "date": "9/3/2022",
    "income": "",
    "subRows": [
      {
        "id": "goal-7",
        "cName": "",
        "mName": "",
        "gName": "To Build A Workspace",
        "gAmt": 42340,
        "gls": 1,
        "income": "60/40",
        "date": "9/3/2022",
        "value": 0.6
      },
      {
        "id": "goal-8",
        "cName": "",
        "mName": "",
        "gName": "Cloud Examination",
        "gAmt": 8730,
        "gls": 1,
        "income": "30/70",
        "date": "9/11/2021",
        "value": 0.29
      }
    ]
  }
]

我需要将上面的数组转换为如下所示

[
  {
    "mName": "SDk",
    "id": "",
    "cName": "",
    "gName": "",
    "gAmt": "",
    "gls": "",
    "value": "",
    "date": "",
    "income": "",
    "subRows": [
      {
        "mName": "",
        "id": "Client 1",
        "cName": "Thor Odin",
        "gName": "",
        "gAmt": 80000,
        "gls": 2,
        "value": 0.855,
        "date": "22/1/2022",
        "income": "",
        "subRows": [
          {
            "id": "goal-1",
            "cName": "",
            "mName": "",
            "gName": "Retirement1",
            "gAmt": 10000,
            "gls": 1,
            "income": "60/40",
            "date": "22/1/2022",
            "value": 0.99
          },
          {
            "id": "goal-2",
            "cName": "",
            "mName": "",
            "gName": "Save For Child Education",
            "gAmt": 70000,
            "gls": 1,
            "income": "55/45",
            "date": "5/12/2023",
            "value": 0.72
          }
        ]
      },
      {
        "mName": "",
        "id": "Client 2",
        "cName": "Steve Rogers",
        "gName": "Save for Investment",
        "gAmt": 67000,
        "gls": 1,
        "value": 0.7,
        "date": "22/1/2022",
        "income": "60/40"
      },
      {
        "mName": "",
        "id": "Client 3",
        "cName": "Wanda Vision",
        "gls": 0,
        "value": 0.9,
        "date": "",
        "income": ""
      },
      {
        "mName": "",
        "id": "Client 4",
        "cName": "Tony Stark",
        "gName": "",
        "gAmt": 23500,
        "gls": 2,
        "value": 0.29,
        "date": "27/10/2019",
        "income": "",
        "subRows": [
          {
            "id": "goal-4",
            "cName": "",
            "mName": "",
            "gName": "Education Loan",
            "gAmt": 500,
            "gls": 1,
            "income": "60/40",
            "date": "27/10/2019",
            "value": 0.29
          },
          {
            "id": "goal-5",
            "cName": "",
            "mName": "",
            "gName": "House Loan",
            "gAmt": 23000,
            "gls": 1,
            "income": "30/70",
            "date": "16/6/2022",
            "value": 0.29
          }
        ]
      }
    ]
  },
  {
    "mName": "Joe",
    "id": "",
    "cName": "",
    "gName": "",
    "gAmt": "",
    "gls": "",
    "value": "",
    "date": "",
    "income": "",
    "subRows": [
      {
        "mName": "",
        "id": "Client 5",
        "cName": "Hack Eye",
        "gName": "Save For World Tour",
        "gAmt": 400000,
        "gls": 1,
        "value": 0.74,
        "date": "",
        "income": "60/40"
      },
      {
        "mName": "",
        "id": "Client 6",
        "cName": "Nick Fury",
        "gName": "",
        "gAmt": 51070,
        "gls": 2,
        "value": 0.44499999999999995,
        "date": "9/3/2022",
        "income": "",
        "subRows": [
          {
            "id": "goal-7",
            "cName": "",
            "mName": "",
            "gName": "To Build A Workspace",
            "gAmt": 42340,
            "gls": 1,
            "income": "60/40",
            "date": "9/3/2022",
            "value": 0.6
          },
          {
            "id": "goal-8",
            "cName": "",
            "mName": "",
            "gName": "Cloud Examination",
            "gAmt": 8730,
            "gls": 1,
            "income": "30/70",
            "date": "9/11/2021",
            "value": 0.29
          }
        ]
      },
      {
        "mName": "",
        "id": "Client 7",
        "cName": "Star Lord",
        "gName": "Save For Child Education",
        "gAmt": 400000,
        "gls": 1,
        "value": 0.93,
        "date": "",
        "income": "55/45"
      }
    ]
  },
  {
    "mName": "Pal",
    "id": "",
    "cName": "",
    "gName": "",
    "gAmt": "",
    "gls": "",
    "value": "",
    "date": "",
    "income": "",
    "subRows": [
      {
        "mName": "",
        "id": "Client 8",
        "cName": "Thanos",
        "gName": "",
        "gAmt": 1200000,
        "gls": 3,
        "value": 0.29,
        "date": "2/11/2019",
        "income": "",
        "subRows": [
          {
            "id": "goal-10",
            "cName": "",
            "mName": "",
            "gName": "Relocation Expense Goal",
            "gAmt": 400000,
            "gls": 1,
            "income": "22/78",
            "date": "2/11/2019",
            "value": 0.29
          },
          {
            "id": "goal-11",
            "cName": "",
            "mName": "",
            "gName": "Save for to buy bike",
            "gAmt": 400000,
            "gls": 1,
            "income": "50/50",
            "date": "1/1/2020",
            "value": 0.29
          },
          {
            "id": "goal-12",
            "cName": "",
            "mName": "",
            "gName": "Save For Education",
            "gAmt": 400000,
            "gls": 1,
            "income": "65/35",
            "date": "9/5/2022",
            "value": 0.29
          }
        ]
      },
      {
        "mName": "",
        "id": "Client 9",
        "cName": "Ego",
        "gName": "Save For Education",
        "gAmt": 400000,
        "gls": 1,
        "value": 0.72,
        "date": "",
        "income": "65/35"
      },
      {
        "mName": "",
        "id": "Client 10",
        "cName": "Bruce Banner",
        "gName": "",
        "gAmt": 27600,
        "gls": 2,
        "value": 0.975,
        "date": "9/10/2018",
        "income": "",
        "subRows": [
          {
            "id": "goal-14",
            "cName": "",
            "mName": "",
            "gName": "Car Loan",
            "gAmt": 23000,
            "gls": 1,
            "income": "60/40",
            "date": "9/10/2018",
            "value": 0.99
          },
          {
            "id": "goal-15",
            "cName": "",
            "mName": "",
            "gName": "Bike Loan",
            "gAmt": 4600,
            "gls": 1,
            "income": "30/70",
            "date": "9/11/2021",
            "value": 0.96
          }
        ]
      }
    ]
  }
]

下面的函数可以很好地将给定数据转换为所需的格式.

const emptyNode = {
  mName: "",
  id: "",
  cName: "",
  gName: "",
  gAmt: "",
  gls: "",
  value: "",
  date: "",
  income: "",
  subRows: [],
};

const groupsByMName = data.reduce((acc, item) => {
  acc[item.mName] ??= [];
  acc[item.mName].push({ ...item, mName: "" });
  return acc;
}, {});

const arrExpected = Object.entries(groupsByMName)
  .map(([mName, subRows]) => ({ ...emptyNode,  mName, subRows }));

但是，有没有一种方法可以通过动态接受密钥来使该函数可重用呢？目前，该功能仅适用于mName人.如果我们想通过其他一些关键手段进行分组.这可能吗？

My Tries个

Dynamic Key Passing个

我可以将密钥向上传递到函数的第一级.

使用这一点

let dynamicKey = 'managerName'

  const groupsByMangerName = data.reduce((acc, item) => {
    acc[item[dynamicKey]] ??= [];
    acc[item[dynamicKey]].push({ ...item, [dynamicKey]: "" });
    return acc;
  }, {});

但无法将其传递到以下部分:

const arrExpected = Object.entries(groupsByMName)
  .map(([mName, subRows]) => ({ ...emptyNode,  mName, subRows }));

推荐答案

我只是稍微调整了一下代码

const data = [{"id":"Client 1","mName":"SDk","cName":"Thor Odin","gName":"","gAmt":80000,"gls":2,"value":0.855,"date":"22/1/2022","income":"","subRows":[{"id":"goal-1","cName":"","mName":"","gName":"Retirement1","gAmt":10000,"gls":1,"income":"60/40","date":"22/1/2022","value":0.99},{"id":"goal-2","cName":"","mName":"","gName":"Save For Child Education","gAmt":70000,"gls":1,"income":"55/45","date":"5/12/2023","value":0.72}]},{"id":"Client 2","mName":"SDk","cName":"Steve Rogers","gName":"Save for Investment","gAmt":67000,"gls":1,"value":0.7,"date":"22/1/2022","income":"60/40"},{"id":"Client 3","mName":"Pal","cName":"Wanda Vision","gls":0,"value":0.9,"date":"","income":""},{"id":"Client 4","mName":"Pal","cName":"Tony Stark","gName":"","gAmt":23500,"gls":2,"value":0.29,"date":"27/10/2019","income":"","subRows":[{"id":"goal-4","cName":"","mName":"","gName":"Education Loan","gAmt":500,"gls":1,"income":"60/40","date":"27/10/2019","value":0.29},{"id":"goal-5","cName":"","mName":"","gName":"House Loan","gAmt":23000,"gls":1,"income":"30/70","date":"16/6/2022","value":0.29}]},{"id":"Client 5","mName":"Joe","cName":"Hack Eye","gName":"Save For World Tour","gAmt":400000,"gls":1,"value":0.74,"date":"","income":"60/40"},{"id":"Client 6","mName":"Joe","cName":"Nick Fury","gName":"","gAmt":51070,"gls":2,"value":0.44499999999999995,"date":"9/3/2022","income":"","subRows":[{"id":"goal-7","cName":"","mName":"","gName":"To Build A Workspace","gAmt":42340,"gls":1,"income":"60/40","date":"9/3/2022","value":0.6},{"id":"goal-8","cName":"","mName":"","gName":"Cloud Examination","gAmt":8730,"gls":1,"income":"30/70","date":"9/11/2021","value":0.29}]}];

const restucture = (data, keyName = 'mName') => {
  const emptyNode = {
    mName: "",
    id: "",
    cName: "",
    gName: "",
    gAmt: "",
    gls: "",
    value: "",
    date: "",
    income: "",
    subRows: [],
  };
  
  const groups = data.reduce((acc, item) => {
    acc[item[keyName]] ??= [];
    acc[item[keyName]].push({ ...item, [keyName]: "" });
    return acc;
  }, {});

  return Object.entries(groups)
    .map(([keyValue, subRows]) => (
        { ...emptyNode,  [keyName]: keyValue , subRows }
    ));  
};

console.log(restucture(data, 'cName'));
.as-console-wrapper { max-height: 100% !important; top: 0 }

Javascript相关问答推荐

过滤对象数组并动态将属性放入新数组

jQuery提交按钮重新加载页面，即使在WordPress中使用preventDefault()

如何在Obsidian dataview中创建进度条

如何调用名称在字符串中的实例方法？

实现JS代码更改CSS元素

变量的值在Reaction组件中的Try-Catch语句之外丢失

将核心模块导入另一个组件模块时存在多个主题

在浏览器中触发插入事件时检索编码值的能力

在表单集中保存更改时删除'；禁用'；

对具有相似属性的对象数组进行分组，并使用串连的值获得结果

判断函数参数的类型

在Java脚本中录制视频后看不到曲目

不协调嵌入图片

如果我的列有条件，我如何呈现图标？

如何在Java脚本中并行运行for或任意循环的每次迭代

使用JavaScript或PHP从div ID值创建锚标记和链接

制表机表宽度在第一次加载时缩小，拖动后正在调整

无限循环，因为变量不断被重新声明为其原始值

Iterator.Next不是进行socket.end()调用后的函数

React rebuild c不会触发rerender

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630