Convert the JSON data response as expected in ReactJS

Question

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
  }
];

Is that possible to convert the above JSON as Below JSON? the data above JSON that come from backend response data. Have to convert as below 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
  }
];

I am using react-Redux for a framework for my application the "mydata" is the response from the backend. I need to change by date wise. need to separate by "source" and "Registernumber" is that possible.?

Hey can you tell what have you tried and where did you face the issue ? — Yash Joshi
– Yash Joshi, Commented Jun 29, 2020 at 12:20

Marik Ishtar · Accepted Answer · 2020-06-29 12:31:51Z

Try this code:

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))

You should use forEach instead of map and [...new Set(mydata.map(item => item.source))] is quicker to remove doubles than filter

HMR · Accepted Answer · 2020-06-29 12:21:56Z

You can use 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;
  }, {})
);

Working snippet:

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);

Collectives™ on Stack Overflow

Convert the JSON data response as expected in ReactJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related