Simple steps for transforming an array into a JavaScript object

Question

Simple steps for transforming an array into a JavaScript object

Here is an array resembling a JSON structure with n elements:

const mainData = [
  {
    phrase: "Phrase 1",
    categorynumber: 1,
    optionnumber: 1,
  },
  {
    phrase: "Phrase 2",
    categorynumber: 1,
    optionnumber: 2,
  },
  {
    phrase: "Phrase 3",
    categorynumber: 2,
    optionnumber: 1,
  },
  {
    phrase: "Phrase 4",
    categorynumber: 3,
    optionnumber: 1,
  },
  {
    phrase: "Phrase 5",
    categorynumber: 3,
    optionnumber: 1,
  },
  {
    phrase: "Phrase 6",
    categorynumber: 3,
    optionnumber: 2,
  },
];

The goal is to transform this into a nested Object structured as follows:

jsObject = {
  1: {
    1: ["Phrase 1"],
    2: ["Phrase 2"],
  },
  2: {
    1: ["Phrase 3"],
  },
  3: {
    1: ["Phrase 4", "Phrase 5"],
    2: ["Phrase 6"],
  },
};

The data should be organized based on the categorynumber and then by optionnumber. (Pay attention to the format of "Phrase 4" and "Phrase 5".)

javascript arrays json object nested

Answer 1

Answer №1

Utilize the reduce method to condense the dataset by utilizing the categorynumber as the primary key and the optionnumber as the secondary key. When adding new options to an existing category, use spreading (...) for the new option and enclose it within an array.

If you want to add extra phrases, make sure to retrieve the existing array and spread the new value accordingly.

const mainData = [
  { phrase: "Phrase 1", categorynumber: 1, optionnumber: 1, },
  { phrase: "Phrase 2", categorynumber: 1, optionnumber: 2, },
  { phrase: "Phrase 3", categorynumber: 2, optionnumber: 1, },
  { phrase: "Phrase 4", categorynumber: 3, optionnumber: 1, },
  { phrase: "Phrase 5", categorynumber: 3, optionnumber: 1, },
  { phrase: "Phrase 6", categorynumber: 3, optionnumber: 2, },
];

const jsObject = mainData.reduce((acc, { phrase, categorynumber, optionnumber }) => ({
  ...acc,
  [categorynumber]: {
    ...(acc[categorynumber] ?? {}),
    [optionnumber]: [...(acc[categorynumber]?.[optionnumber] ?? []), phrase]
  }
}), {});

console.log(jsObject);

.as-console-wrapper { top: 0; max-height: 100% !important; }

<!--

jsObject = {
  1: {
    1: ["Phrase 1"],
    2: ["Phrase 2"]
  },
  2: {
    1: ["Phrase 3"]
  },
  3: {
    1: ["Phrase 4", "Phrase 5"],
    2: ["Phrase 6"]
  }
}

-->

Answer 2

Utilize the reduce method to condense the dataset by utilizing the categorynumber as the primary key and the optionnumber as the secondary key. When adding new options to an existing category, use spreading (...) for the new option and enclose it within an array.

If you want to add extra phrases, make sure to retrieve the existing array and spread the new value accordingly.

const mainData = [
  { phrase: "Phrase 1", categorynumber: 1, optionnumber: 1, },
  { phrase: "Phrase 2", categorynumber: 1, optionnumber: 2, },
  { phrase: "Phrase 3", categorynumber: 2, optionnumber: 1, },
  { phrase: "Phrase 4", categorynumber: 3, optionnumber: 1, },
  { phrase: "Phrase 5", categorynumber: 3, optionnumber: 1, },
  { phrase: "Phrase 6", categorynumber: 3, optionnumber: 2, },
];

const jsObject = mainData.reduce((acc, { phrase, categorynumber, optionnumber }) => ({
  ...acc,
  [categorynumber]: {
    ...(acc[categorynumber] ?? {}),
    [optionnumber]: [...(acc[categorynumber]?.[optionnumber] ?? []), phrase]
  }
}), {});

console.log(jsObject);

.as-console-wrapper { top: 0; max-height: 100% !important; }

<!--

jsObject = {
  1: {
    1: ["Phrase 1"],
    2: ["Phrase 2"]
  },
  2: {
    1: ["Phrase 3"]
  },
  3: {
    1: ["Phrase 4", "Phrase 5"],
    2: ["Phrase 6"]
  }
}

-->

Simple steps for transforming an array into a JavaScript object

Answer №1

Similar questions

Arranging asynchronous functions using async/await in Node.js/JavaScript

Slick.js integrated with 3D flip is automatically flipping after the initial rotation

Tips for preserving images while browsing a website built with Angular single-page application

Switch out the content within a div upon selection

What is the best way to aggregate totals by date in Ruby when working with an array of hashes?

Creating sparse fieldset URL query parameters using JavaScript

What is the best way to capture data sent by Express within a functional component?

Ways to create collapsible navigation bars in your website

What purpose does the by.js locator serve in Protractor/WebDriverJS?

Using AJAX to dynamically render asynchronous requests on the DOM

Encountered StackOverflowError while attempting to transform criteria list output into json format

Remove HTML tags from a table cell containing a combination of radio buttons and labels

How can I use JavaScript to create a drop-down menu that only appears after selecting the previous one?

A simple guide to fetching JSON data and storing it in a variable, then parsing it and displaying it

Converting a custom object with JodaTime attributes into JSON serialization

Update my function to be asynchronous by changing async: false to async: true using JQuery and Ajax

Import several image files using AngularJS

Code segmentation when accessing memory that has been allocated

Activating the Mobile Menu Function when the Window is Resized

I am facing an issue with TypeScript as it is preventing me from passing the prop in React and Zustand