Break down objects into arrays of objects in JavaScript

Question

Break down objects into arrays of objects in JavaScript

Hello, I'm struggling with transforming this object into an array of objects.

The 'number' and 'reason' fields are currently stored as strings separated by commas. I need to split them into their own separate objects. The example dataset along with the desired output is shown in the code snippet below.

// Initial data structure
const data = {
  date: "2021-09-07 10:28:34,2021-09-08 14:45:22",
  startDate: "2021-09-07 00:00:00,2021-09-08 14:45:22"
  id: "111111"
  number: "1,9"
  reason: "Autres,Autres"

}

// Expected output:
const res = [{
    date: "2021-09-07 10:28:34",
    startDate: "2021-09-07 00:00:00",
    id: 11111,
    number: 1,
    reason: "Autres"
  } {
    date: "2021-09-08 14:45:22",
    startDate: "2021-09-08 14:45:22",
    id: 11111,
    number: 9,
    reason: "Autres"
  }]

javascript arrays split

Answer 1

Answer №1

Convert the original object with string-combined-columns into an object with columns split as arrays by using the reduce method and spread operator.

1a. Identify column names from the original object by excluding the 'id' column.

1b. Keep track of the number of rows during the projection process.

Go through each row based on the row count obtained above, creating a new object for each row and extracting relevant column values using the current iteration index.

const original = {
  date: "2021-09-07 10:28:34,2021-09-08 14:45:22",
  startDate: "2021-09-07 00:00:00,2021-09-08 14:45:22",
  id: "111111",
  number: "1,9",
  reason: "Autres,Autres"
};

function split(obj) {
  const columnNames = Object.keys(obj).filter(key => key !== "id");
  const singleWithSplitted = columnNames.reduce((result, columnName) => {
    const splittedArray = obj[columnName].split(",");
    return ({
      rowsCount: Math.max(result.rowsCount, splittedArray.length),
      table: { ...result.table,
        [columnName]: splittedArray
      }
    });
  }, {
    rowsCount: 0
  });
  const arr = [];
  for (i = 0; i < singleWithSplitted.rowsCount; i++) {
    const result = {
      id: obj.id
    };
    columnNames.forEach((columnName) => {
      result[columnName] = singleWithSplitted.table[columnName][i];
    });
    arr.push(result);
  };
  return arr;
}
console.log(split(original));

Answer 2

Convert the original object with string-combined-columns into an object with columns split as arrays by using the reduce method and spread operator.

1a. Identify column names from the original object by excluding the 'id' column.

1b. Keep track of the number of rows during the projection process.

Go through each row based on the row count obtained above, creating a new object for each row and extracting relevant column values using the current iteration index.

const original = {
  date: "2021-09-07 10:28:34,2021-09-08 14:45:22",
  startDate: "2021-09-07 00:00:00,2021-09-08 14:45:22",
  id: "111111",
  number: "1,9",
  reason: "Autres,Autres"
};

function split(obj) {
  const columnNames = Object.keys(obj).filter(key => key !== "id");
  const singleWithSplitted = columnNames.reduce((result, columnName) => {
    const splittedArray = obj[columnName].split(",");
    return ({
      rowsCount: Math.max(result.rowsCount, splittedArray.length),
      table: { ...result.table,
        [columnName]: splittedArray
      }
    });
  }, {
    rowsCount: 0
  });
  const arr = [];
  for (i = 0; i < singleWithSplitted.rowsCount; i++) {
    const result = {
      id: obj.id
    };
    columnNames.forEach((columnName) => {
      result[columnName] = singleWithSplitted.table[columnName][i];
    });
    arr.push(result);
  };
  return arr;
}
console.log(split(original));

Break down objects into arrays of objects in JavaScript

Answer №1

Similar questions

Avoiding type errors in d3 v5 axis by using Typescript

Populate an array with information retrieved from a database

Google Chrome is unable to process Jquery JSON .each() function

Looking for assistance with updating a JavaScript Object Array and embedding it into a function

Retrieve pixel information upon touch in an Appcelerator Titanium application on Android or iPhone

Creating an associative array in javascript: A step-by-step guide

Verifying if the completion of the busboy event has already happened or not

Substitute the specific class title with the present class

How to Access a div from another website using jQuery

How to set up 'ng serve' command in Angular to automatically open a private browsing window?

Is it possible to modify the express static directory path depending on the route being accessed?

Adding arrays to a larger array

Unveiling the Mystery: How Browser Thwarts Server Push in HTTP/2.0

I'm having trouble with my dataTable creation using JQuery. Can anyone help me troubleshoot?

The Discord OAuth2 bot fails to assign roles to authenticated users

Has xlink:href become outdated for svg <image> elements?

Open a fresh window using Javascript and add new content inside

What kind of data structure is suitable for a MediaStream when passing it as a prop in a Vue component

Leaflet setStyle changes are effective when applied through the console but do not reflect in the actual

Why does the CLI crash when attempting to retrieve all data from an Oracle Database with JQuery?