在 ReactJS 中按预期转换 JSON 数据响应答案

【问题标题】：Convert the JSON data response as expected in ReactJS在 ReactJS 中按预期转换 JSON 数据响应
【发布时间】：2020-06-29 12:07:41
【问题描述】：

var mydata = [
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul1: 1004
  },
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul2: 1234
  },
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul3: 1034
  },
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul4: 1204
  },
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul5: 2234
  },
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul6: 2234
  },
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul7: 2034
  },
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul8: 2412
  },
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul9: 2502
  },
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul10: 1122
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul1: 1034
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul2: 1304
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul3: 1230
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul4: 2234
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul5: 2234
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul6: 2224
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul7: 2232
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul8: 1434
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul9: 1244
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul10: 1234
  }
];

可以将上面的 JSON 转换为下面的 JSON 吗？来自后端响应数据的 JSON 以上数据。必须转换为如下 JSON

var dataneeded = [
  {
    source: 11,
    Registernumber: ">RT-113, <RT-333",
    jul1: 1004,
    jul2: 1234,
    jul3: 1034,
    jul4: 1204,
    jul5: 2234,
    jul6: 2234,
    jul7: 2034,
    jul8: 2412,
    jul9: 2502,
    jul10: 1122
  },
  {
    source: 12,
    Registernumber: ">GF-103, <GF-303",
    jul1: 1034,
    jul2: 1304,
    jul3: 1230,
    jul4: 2234,
    jul5: 2234,
    jul6: 2224,
    jul7: 2232,
    jul8: 1434,
    jul9: 1244,
    jul10: 1234
  }
];

我正在为我的应用程序使用 react-Redux 作为框架，“mydata”是来自后端的响应。我需要按日期更改。需要用“source”和“Registernumber”分开可以吗？

【问题讨论】：

嘿，您能说说您尝试了什么以及您在哪里遇到问题吗？

标签： javascript arrays reactjs react-redux

【解决方案1】：

试试这个代码：

var mydata = [
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul1": 1004
   },
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul2": 1234
   },
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul3": 1034
   },
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul4": 1204
   },
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul5": 2234
   },
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul6": 2234
   },
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul7": 2034
   },
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul8": 2412
   },
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul9": 2502
   },
   {
      "source": 11,
      "Registernumber": ">RT-113, <RT-333",
      "jul10": 1122
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul1": 1034
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul2": 1304
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul3": 1230
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul4": 2234
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul5": 2234
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul6": 2224
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul7": 2232
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul8": 1434
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul9": 1244
   },
   {
      "source": 12,
      "Registernumber": ">GF-103, <GF-303",
      "jul10": 1234
   }
]

const parseData = (mydata) => {
  const sources = mydata.map(item => item.source).filter( (value, index, self) => self.indexOf(value) === index )
  const res = []
  sources.map(source => { 
    let d = {}
    mydata.filter(item => (item.source === source )).forEach(item => { d = {...d, ...item} })
    res.push(d)
  })

  return res
}

console.log(parseData(mydata))

【讨论】：

你应该使用 forEach 而不是 map 和 [...new Set(mydata.map(item => item.source))] 比过滤器更快地删除双精度

【解决方案2】：

你可以使用reduce：

Object.values(
  mydata.reduce((result, item) => {
    result[item.source] = {//group by source property
      ...result[item.source],//merge items with same source
      ...item,
    };
    return result;
  }, {})
);

工作sn-p：

const mydata = [
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul1: 1004,
  },
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul2: 1234,
  },
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul3: 1034,
  },
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul4: 1204,
  },
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul5: 2234,
  },
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul6: 2234,
  },
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul7: 2034,
  },
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul8: 2412,
  },
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul9: 2502,
  },
  {
    source: 11,
    Registernumber: '>RT-113, <RT-333',
    jul10: 1122,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul1: 1034,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul2: 1304,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul3: 1230,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul4: 2234,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul5: 2234,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul6: 2224,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul7: 2232,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul8: 1434,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul9: 1244,
  },
  {
    source: 12,
    Registernumber: '>GF-103, <GF-303',
    jul10: 1234,
  },
];
const result = Object.values(
  mydata.reduce((result, item) => {
    result[item.source] = {
      ...result[item.source],
      ...item,
    };
    return result;
  }, {})
);

console.log(result);

【讨论】：