Question

0

66

Vistas

transform an array of objects into an array of objects with a different format

There is a use case whereby data needs to be transformed into result for the purpose of displaying the data in the UI in a pivoted format. In result the numbered keys are the month numbers and their values are the quantity for that month.

const data = [
            { date: '10/1/2021', quantity: 47 },
            { date: '11/1/2021', quantity: 58 },
            { date: '12/1/2021', quantity: 96 },
            { date: '1/1/2022', quantity: 88 },
            { date: '2/1/2022', quantity: 90 },
        ];

const result = [
            { year: 2021, 10: 47, 11: 58, 12: 96 },
            { year: 2022, 1: 88, 2: 90 }
        ];

So far I have created intermediate but don't know how to get that into the final result format in a concise manner. ES6 solutions are preferred.

const data = [
    { date: '10/1/2021', quantity: 47 },
    { date: '11/1/2021', quantity: 58 },
    { date: '12/1/2021', quantity: 96 },
    { date: '1/1/2022', quantity: 88 },
    { date: '2/1/2022', quantity: 90 },
];

const intermediate = data.map(o => {
    // eslint-disable-next-line no-unused-vars
    const [month, day, year] = o.date.split('/');    // destructuring assignment
    return { year: year, [month]: o.quantity }
});

console.log(intermediate);

7 months ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

Updated: from intermediate to result

const intermediate = [
  { '10': 47, 'year': '2021' },
  { '11': 58, 'year': '2021' },
  { '12': 96, 'year': '2021' },
  { '1': 88, 'year': '2022' },
  { '2': 90, 'year': '2022' }
]

const yearDataMap = {}
intermediate.forEach(dto => {
  const storageObj = {} // temp store object

  Object.entries(dto).forEach(([key, value]) => { // destructure object props
    if(key === 'year') {
      storageObj['year'] = value
    }else {
      storageObj['month'] = key
      storageObj['quantity'] = value
    }
  })

  const {year, month, quantity} = storageObj 

  if (!yearDataMap[year]){ // if no entries with this year preset it with year record
    yearDataMap[year] = { year } // same as = { year: year }
  }

  yearDataMap[year][month] = quantity
})

const yearsArr = Object.values(yearDataMap)

console.log(yearsArr)

From given to result:

const data = [
  { date: '10/1/2021', quantity: 47 },
  { date: '11/1/2021', quantity: 58 },
  { date: '12/1/2021', quantity: 96 },
  { date: '1/1/2022', quantity: 88 },
  { date: '2/1/2022', quantity: 90 },
];

const yearDataMap = {} // map to store dates by year

data.forEach(dto => {
  const {date, quantity} = dto
  const [month, day, year] = date.split('/')

  if (!yearDataMap[year]){ // if no entries with this year preset it with year record
    yearDataMap[year] = { year } // same as = { year: year }
  }

  yearDataMap[year][month] = quantity // adding quantity  by month
})

const yearDataArr = Object.values(yearDataMap) // get rid of map and get the `result`

console.log(yearDataArr)

7 months ago · Juan Pablo Isaza Denunciar

0

your approach was not bad. i built on it. the goal was to fill a global object. that was it.

globalObj = {}
data = [
  { date: '10/1/2021', quantity: 47 },
  { date: '11/1/2021', quantity: 58 },
  { date: '12/1/2021', quantity: 96 },
  { date: '1/1/2022', quantity: 88 },
  { date: '2/1/2022', quantity: 90 },
];

data.forEach((o) => {
  [month, day, year] = o.date.split('/'); 
  
  if (!globalObj[year]) {
    globalObj[year] = { year }    
  }
    globalObj[year][month] = o.quantity    
})
const result = Object.values(globalObj)
console.log(result)

7 months ago · Juan Pablo Isaza Denunciar

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-11T10:50:40.633Z

A way to get from intermediate to result:

const data = [
    { date: '10/1/2021', quantity: 47 },
    { date: '11/1/2021', quantity: 58 },
    { date: '12/1/2021', quantity: 96 },
    { date: '1/1/2022', quantity: 88 },
    { date: '2/1/2022', quantity: 90 },
];

const intermediate = data.map(o => {
    // eslint-disable-next-line no-unused-vars
    const [month, day, year] = o.date.split('/');    // destructuring assignment
    return { year: year, [month]: o.quantity }
});

let years = [...new Set(intermediate.map(o => o.year))];
let accumulator = Object.assign({}, ...years.map(year => ({[year]: {}})));

intermediate.forEach(o => {
    accumulator[o.year] = { ...accumulator[o.year], ...o };
});

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

But the above contained more individual steps than necessary. Ended up doing this -

const data = [
    { date: '10/1/2021', quantity: 47 },
    { date: '11/1/2021', quantity: 58 },
    { date: '12/1/2021', quantity: 96 },
    { date: '1/1/2022', quantity: 88 },
    { date: '2/1/2022', quantity: 90 },
];

accumulator = {};

data.forEach(o => {
    // eslint-disable-next-line no-unused-vars
    const [month, day, year] = o.date.split('/');    // destructuring assignment
    accumulator[year] = { ...accumulator[year], year: year, [month]: o.quantity };
});

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