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

Can Googlebot detect changes made to an HTML <title> tag using JavaScript?

NodeJS: Issue with Route is disrupting the functionality of the Restful API

Is it possible to maintain HTML, JS, and CSS files as separate entities when developing Vue.js components, similar to how it is

What is the best way to determine the accurate true or false outcome from a JSON assertion in JMeter?

Press one button to activate another button

jQuery's visibility check function is not functioning properly

Tips on customizing the MSAL login commands for successful integration with numerous users

What are the steps for performing a self-triggered AJAX post request?

Error encountered while attempting to make AJAX call: "`$.ajax` parse error on JSON object: {"vErrorsFound":true,"vMessage"

Error encountered: A syntax error occurred due to an unexpected token ":" found in the file path D:practise odejs odejs-demoviewsindex.html

What could be causing my JQuery code to fail after loading data via ajax?

Exploring ways to track file upload progress with the Fetch API in ReactJS or NextJS

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

Using AJAX, JQuery, and PHP to convert a given name to match the columns in a query, utilizing the data sent

Difficulty closing Modal Popup when multiple Modals are displayed simultaneously

Inconsistencies in latency experienced when making calls to Google Sheets V4 API

Creating a reusable anonymous self-invoking function

Resetting a Material UI search filter TextField back to its initial state after clearing it

Radio button triggers an ajax call once, but then fails to function

Adjusting the font color when hovering over multiline text