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

Trigger an instantaneous update of the masonry grid

What is the best way to save javascript code without running it?

Optimal methods for handling Ajax requests in the present day

Experiencing memory issues with small programs in Node on macOS?

What is the best way to keep my data within a global variable?

Transmitting information from JavaScript to a PHP script

Django issue: A Tuple or struct_time argument is necessary

Retrieve JSON data within an HTML element, where the element is sourced from an AJAX GET response

What is the best way to store the result from a JavaScript FileReader into a variable for future reference?

Using Typescript to import an npm package that lacks a definition file

You can only use the angularjs http function once

What could be causing my page width to only expand to 100% when using "fit-content"?

Bootstrap: Retrieve an image from a modal

The text/font-weight of the header button is mysteriously shifting without warning

Is it possible to assign a property name using a string during the creation of an object?

Using JavaScript to extract data from a JSON-formatted URL

Stop the continuous AJAX loop or look for an alternative method to retrieve and compare a list of HTML pages

Steps to create a personalized material-ui element

Updating state using the react `setState()` function will automatically trigger a re-render

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand