transform an object into an array of objects

Question

transform an object into an array of objects

After receiving data from the backend, it looks like this:

 const fetchResult = { 
            cmo: 'integrated', 
            schedule1: '2021-08-12', 
            schedule2: '2021-09-20', 
            kendaraan: {}, 
            kubikasi1: 207000, 
            kubikasi2: 20000,
            status_so1: true,
            status_so2: false,
}

My desired format is as follows:

const result = [
  {
    schedule: value,
    kubikasi: value,
    status_so: true
  },
  {
    schedule: value,
    kubikasi: value,
    status_so: false
  },
]

I aim to convert the JSON data received from the backend into an array of objects and group it according to the expected format. The dynamic nature of data elements like schedule from the API should be considered.

Here's what I have attempted so far:

for (let i = 1; i <= 4; i++) {
        if (cmo["schedule_" + i]) {
          data.push({
            schedule: cmo["schedule_" + i],
            namakendaraan: cmo["namakendaraan" + i],
            kendaraan: cmo["kendaraan" + i],
            totalCarton: cmo["totalCarton" + i],
            tonase: cmo["tonase_" + i],
            totalTonaseKendaraan: cmo["totalTonaseKendaraan" + i],
            totalPercentaseTonaseOrder: cmo["totalPercentaseTonaseOrder" + i],
            kubikasi: cmo["kubikasi_" + i],
            totalKubikasiKendaraan: cmo["totalKubikasiKendaraan" + i],
            totalPercentaseKubikasiOrder:
              cmo["totalPercentaseKubikasiOrder" + i],
            nomor_so: cmo["nomor_so_" + i],
            status_so: cmo["status_so_" + i],
          });
        } else {
          data.push({
            schedule: null,
            namakendaraan: null,
            kendaraan: null,
            totalCarton: null,
            tonase: null,
            totalTonaseKendaraan: null,
            totalPercentaseTonaseOrder: null,
            kubikasi: null,
            totalKubikasiKendaraan: null,
            totalPercentaseKubikasiOrder: null,
            nomor_so: null,
            status_so: null,
          });
        }

javascript json object ecmascript-6

Answer 1

Answer №1

To streamline the object's data, convert it into a Map. Iterate through each entry and extract the key along with the number (idx). If no number is present, move on to the next iteration by returning the accumulator (which is the Map). In case the idx exists, update or add the object in the Map:

const fetchData = {"product":"phone","price":500,"color":"black"}

const newData = Array.from(Object.entries(fetchData)
  .reduce((acc, [k, v]) => {
    const [key, idx = null] = k.split(/([0-9]+$)/)
    
    return idx === null
      ? acc
      : acc.set(idx, { ...acc.get(idx), [key]: v })
  }, new Map()).values())
  
console.log(newData)

Answer 2

To streamline the object's data, convert it into a Map. Iterate through each entry and extract the key along with the number (idx). If no number is present, move on to the next iteration by returning the accumulator (which is the Map). In case the idx exists, update or add the object in the Map:

const fetchData = {"product":"phone","price":500,"color":"black"}

const newData = Array.from(Object.entries(fetchData)
  .reduce((acc, [k, v]) => {
    const [key, idx = null] = k.split(/([0-9]+$)/)
    
    return idx === null
      ? acc
      : acc.set(idx, { ...acc.get(idx), [key]: v })
  }, new Map()).values())
  
console.log(newData)

Answer 3

Answer №2

Organize the entries of the object based on numbers, condense them into nested arrays, and then transform them into an array of objects.

const inputObject = { country1: 'USA', country2: 'Canada', population1: 300000000, population2: 37000000 }

const result = Object.entries(inputObject).reduce((acc, curr) => {
    if (parseInt(curr[0][curr[0].length - 1]) > 0) {
        const index = parseInt(curr[0][curr[0].length - 1]) - 1
        const pair = [curr[0].substring(0, curr[0].length - 1), curr[1]]
        !acc[index] ? (acc[index] = [], acc[index].push(pair)) : acc[index].push(pair)
    }
    return acc
}, []).map(item => Object(Object.fromEntries(item)))

console.log(result)

Answer 4

Organize the entries of the object based on numbers, condense them into nested arrays, and then transform them into an array of objects.

const inputObject = { country1: 'USA', country2: 'Canada', population1: 300000000, population2: 37000000 }

const result = Object.entries(inputObject).reduce((acc, curr) => {
    if (parseInt(curr[0][curr[0].length - 1]) > 0) {
        const index = parseInt(curr[0][curr[0].length - 1]) - 1
        const pair = [curr[0].substring(0, curr[0].length - 1), curr[1]]
        !acc[index] ? (acc[index] = [], acc[index].push(pair)) : acc[index].push(pair)
    }
    return acc
}, []).map(item => Object(Object.fromEntries(item)))

console.log(result)

transform an object into an array of objects

Answer №1

Answer №2

Similar questions

Checking the boxes in javascript

Retrieving JavaScript return values in a C# WebBrowser control within a WPF application

ZeroMQ and Electron integration: Unable to find the specified bindings file

Displaying data from a table in a modal window using getSelected in Bootstrap-table

Tips for successfully passing a variable as props within the confines of a different function's component

Exploring JavaScript through the Lens of Object-Oriented Concepts from Java

Watch the video and follow along with your mouse using jQuery

Guide on transforming an array containing indexed objects into a simple object

Add CSS styles to the outermost container element when the slideshow is currently in use

The graph from Flot is not showing up, and there are no error messages

web browser freezing when trying to open bigger files

Using AJAX to communicate with a MySQL database and create a countdown timer using JavaScript

Retrieve the text content from the HTML document

Using Regex with JavaScript while ignoring letter case

Highcharts-ng allows us to create charts without using the traditional syntax such as $('#container').high

Is it possible to simultaneously run watchify and node-sass watch together?

Fetch information from DataObject's CSV file using JavaScript

Assistance required in designing a unique shape using Three.js

The issue lies with the Cookies.get function, as the Typescript narrowing feature does not

What is the reason for object destructuring not functioning properly in styles?