Reformat an array containing objects so that their structure is changed to a different format

Question

Reformat an array containing objects so that their structure is changed to a different format

Imagine a scenario where the data needs to be manipulated into a specific format called 'result' for easier display on the user interface. In this 'result', the month numbers are used as keys, representing each month's quantity.

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

I've managed to generate an 'intermediate' structure from the original data but I'm struggling with converting it into the final 'result' format efficiently using ES6 methods.

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

javascript

Answer 1

Answer №1

Modified: changed intermediate to result

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

const yearDataMap = {}
result.forEach(dto => {
  const storageObj = {} // temporary object for storing data

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

  const {year, month, quantity} = storageObj 

  if (!yearDataMap[year]){ 
    yearDataMap[year] = { year } 
  }

  yearDataMap[year][month] = quantity
})

const yearsArr = Object.values(yearDataMap)

console.log(yearsArr)

Changed 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 = {} 

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

  if (!yearDataMap[year]){ 
    yearDataMap[year] = { year } 
  }

  yearDataMap[year][month] = quantity 
})

const yearDataArr = Object.values(yearDataMap) 

console.log(yearDataArr)

Answer 2

Modified: changed intermediate to result

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

const yearDataMap = {}
result.forEach(dto => {
  const storageObj = {} // temporary object for storing data

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

  const {year, month, quantity} = storageObj 

  if (!yearDataMap[year]){ 
    yearDataMap[year] = { year } 
  }

  yearDataMap[year][month] = quantity
})

const yearsArr = Object.values(yearDataMap)

console.log(yearsArr)

Changed 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 = {} 

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

  if (!yearDataMap[year]){ 
    yearDataMap[year] = { year } 
  }

  yearDataMap[year][month] = quantity 
})

const yearDataArr = Object.values(yearDataMap) 

console.log(yearDataArr)

Answer 3

Answer №2

your approach wasn't too shabby. I took your foundation and expanded upon it with the aim of populating a global object. That was the ultimate objective.

globalData = {}
info = [
  { date: '10/1/2021', amount: 47 },
  { date: '11/1/2021', amount: 58 },
  { date: '12/1/2021', amount: 96 },
  { date: '1/1/2022', amount: 88 },
  { date: '2/1/2022', amount: 90 },
];

info.forEach((entry) => {
  [month, day, year] = entry.date.split('/'); 
  
  if (!globalData[year]) {
    globalData[year] = { year }    
  }
    globalData[year][month] = entry.amount    
})
const finalResult = Object.values(globalData)
console.log(finalResult)

Answer 4

your approach wasn't too shabby. I took your foundation and expanded upon it with the aim of populating a global object. That was the ultimate objective.

globalData = {}
info = [
  { date: '10/1/2021', amount: 47 },
  { date: '11/1/2021', amount: 58 },
  { date: '12/1/2021', amount: 96 },
  { date: '1/1/2022', amount: 88 },
  { date: '2/1/2022', amount: 90 },
];

info.forEach((entry) => {
  [month, day, year] = entry.date.split('/'); 
  
  if (!globalData[year]) {
    globalData[year] = { year }    
  }
    globalData[year][month] = entry.amount    
})
const finalResult = Object.values(globalData)
console.log(finalResult)

Answer 5

Answer №3

A method to transition from starting point to final outcome:

const info = [
    { time: '10/1/2021', count: 47 },
    { time: '11/1/2021', count: 58 },
    { time: '12/1/2021', count: 96 },
    { time: '1/1/2022', count: 88 },
    { time: '2/1/2022', count: 90 },
];

const startingPoint = info.map(obj => {
    // eslint-disable-next-line no-unused-vars
    const [month, day, year] = obj.time.split('/');    // destructuring assignment
    return { year: year, [month]: obj.count }
});

let yearsArr = [...new Set(startingPoint.map(o => o.year))];
let dataAccumulator = Object.assign({}, ...yearsArr.map(year => ({[year]: {}})));

startingPoint.forEach(obj => {
    dataAccumulator[obj.year] = { ...dataAccumulator[obj.year], ...obj };
});

const finalOutcome = Object.values(dataAccumulator);
console.log(finalOutcome);

However, the above process included more steps than necessary. Eventually simplified it to -

const info = [
    { time: '10/1/2021', count: 47 },
    { time: '11/1/2021', count: 58 },
    { time: '12/1/2021', count: 96 },
    { time: '1/1/2022', count: 88 },
    { time: '2/1/2022', count: 90 },
];

resultantData = {};

info.forEach(obj => {
    // eslint-disable-next-line no-unused-vars
    const [month, day, year] = obj.time.split('/');    // destructuring assignment
    resultantData[year] = { ...resultantData[year], year: year, [month]: obj.count };
});

const finalOutcome = Object.values(resultantData);
console.log(finalOutcome);

Answer 6

A method to transition from starting point to final outcome:

const info = [
    { time: '10/1/2021', count: 47 },
    { time: '11/1/2021', count: 58 },
    { time: '12/1/2021', count: 96 },
    { time: '1/1/2022', count: 88 },
    { time: '2/1/2022', count: 90 },
];

const startingPoint = info.map(obj => {
    // eslint-disable-next-line no-unused-vars
    const [month, day, year] = obj.time.split('/');    // destructuring assignment
    return { year: year, [month]: obj.count }
});

let yearsArr = [...new Set(startingPoint.map(o => o.year))];
let dataAccumulator = Object.assign({}, ...yearsArr.map(year => ({[year]: {}})));

startingPoint.forEach(obj => {
    dataAccumulator[obj.year] = { ...dataAccumulator[obj.year], ...obj };
});

const finalOutcome = Object.values(dataAccumulator);
console.log(finalOutcome);

However, the above process included more steps than necessary. Eventually simplified it to -

const info = [
    { time: '10/1/2021', count: 47 },
    { time: '11/1/2021', count: 58 },
    { time: '12/1/2021', count: 96 },
    { time: '1/1/2022', count: 88 },
    { time: '2/1/2022', count: 90 },
];

resultantData = {};

info.forEach(obj => {
    // eslint-disable-next-line no-unused-vars
    const [month, day, year] = obj.time.split('/');    // destructuring assignment
    resultantData[year] = { ...resultantData[year], year: year, [month]: obj.count };
});

const finalOutcome = Object.values(resultantData);
console.log(finalOutcome);

Reformat an array containing objects so that their structure is changed to a different format

Answer №1

Answer №2

Answer №3

Similar questions

The variables $invalid and $valid in my AngularJS form have not been assigned any values

Dividing image styles within css

Calculating the total sum of values in a table using Jquery

Is it possible to mimic a ref attribute with jest/rtl within a functional component?

Deleting images based on their class through a loop

Tips for simulating the $timeout service with sinon?

Tips for managing input for objects in Vue when the object hasn't been declared yet?

What is the proper way to indicate the pointer to the current element within the array?

Customize Bottom Navigation Bar in React Navigation based on User Roles

When trying to convert to JSON in node, the process fails. However, the data can still be

I am facing an issue with the routing functionality in the Quasar framework for Vue 3

The router should display a component based on the user's access level, even if they are

What is the best way to send a populated custom class from JavaScript to a .NET MVC app using AJAX?

The getSession provided by the getSession function is accessible within getServerSideProps but appears as undefined within the component

Incorporating Content-Disposition headers to enable the file to be both downloaded and opened

Ways to update the color of the mat-dialog-title using the material theme

Issues with retrieving the output of a function nested within another function through an ajax request

Troubleshooting video streaming loading issues caused by 404 errors in URL paths with videojs

Establish a cookie using the PHP session's username

Issue with burger menu functionality, button unresponsive