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

Incorporate text onto an image using Semantic UI

Securing your folders with Next Auth middleware

Is it possible to use both MUI makeStyles and Theming in the _app.js file?

When using child_process to run a Python script in Node.js, a promise may not resolve properly if the process exits before all

Use the Arrow Keys to guide your way through the Page

What is the best way to retrieve the "value" property of an <input> element in HTML?

The decision will be dependent on the outcomes provided by the $resource promise

Guide on generating a fresh array of objects that encompass distinct items, alongside their combined prices and quantities using JavaScript

Is there a way to create an HTML select element where each option has a unique background color, and will display properly

Exploring ways to access elements within shadow-root (open) in Angular using SVG.js

Conceal rows in the table until the search (filterBy) is completed

Receiving a segmentation fault when attempting to parse decimal numbers from a string in the C programming

Utilizing GroupBy in RxJs for an Observable of Objects数组

Is there a method to redirect and display a JavaScript message efficiently?

What is the best way to utilize functions from different JavaScript files?

Unexpected issue with Ionic 4 subarray returning as undefined even though the index is accurate

What is the best way to change the color of my Material Icons when I move my cursor over them?

Incorporating a new dropdown menu above the content of a pre-existing jQuery accordion dropdown, causing the content to shift downwards

Tips for avoiding Google Tag Manager from interfering with document.write() function

Tips for obtaining the correct Javascript output for the number pyramid