javascript - 交互和重新组织 JSON 数据

Question

我从端点接收到的数据不足以在表格中显示，直到进行一些更改。这是我接收示例数据的方式：

const data = [
    {
      Year: 2017,
      OriginalIntBalanceOverdue: 0.0,
      DefaultPrincipalInt: 749.0,
      OriginalPrincipal: 127850.0
    },
    {
      Year: 2018,
      OriginalIntBalanceOverdue: 0.0,
      DefaultPrincipalInt: 1543.0,
      OriginalPrincipal: 182566.0
    },
    {
      Year: 2019,
      OriginalIntBalanceOverdue: 0.0,
      DefaultPrincipalInt: 30.0,
      OriginalPrincipal: 108000.0
    }
  ];

但是数据应该按除年份之外的所有这些重复属性进行分组。这是它的样子：

const dataDesired = [
  {
    item: "OriginalIntBalanceOverdue",
    "2017": 0.0,
    "2018": 0.0,
    "2019": 0.0
  },
  {
    item: "DefaultPrincipalInt",
    "2017": 749.0,
    "2018": 1543.0,
    "2019": 200
  },
  {
    item: "OriginalPrincipal",
    "2017": 127850.0,
    "2018": 30.0,
    "2019": 108000.0
  }
];

我添加了代码沙盒以更轻松地实施解决方案：

https://codesandbox.io/s/vibrant-jones-sgy4u?file=/src/App.js:697-1016

我尝试了几种方法

Object.keys(data).forEach(key=>{
....
...
}

但我没有成功。

标签： javascriptarraysjsonreactjs

Answer 1

你可以试试这个。在这里，我假设您始终Year存在该字段。

const data = [{ Year: 2017, OriginalIntBalanceOverdue: 0.0, DefaultPrincipalInt: 749.0, OriginalPrincipal: 127850.0}, { Year: 2018, OriginalIntBalanceOverdue: 0.0, DefaultPrincipalInt: 1543.0, OriginalPrincipal: 182566.0}, { Year: 2019, OriginalIntBalanceOverdue: 0.0, DefaultPrincipalInt: 30.0, OriginalPrincipal: 108000.0}];

const res = {};

data.forEach(item => {
  let year = null;
  Object.entries(item).forEach(([key, value]) => {
    if (key === 'Year') year = value;
    else {
      if (res[key] === undefined) {
        res[key] = {}; res[key].item = key;
      }
      res[key][year] = value;
    }
  });
});

const result = Object.values(res);
console.log(result);

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