JavaScript - Organizing Objects

Question

JavaScript - Organizing Objects

I have successfully implemented a code to group objects by their category. Here is the code snippet:

  let groupBy = (element, key) => {
    return element.reduce((value, x) => {
          (value[x[key]] = value[x[key]] || []).push(x);
       return value;
     }, {});
   }; 
  let items = groupBy(results, 'category')

The resulting grouped objects look like this:

{
    "Administration": [
        {
            "shp_name": "Village Boundary",
            "color_prop": "#000000",
            "shp_prop": "Batu Ampar"
        },
        {
            "shp_name": "Village Boundary",
            "color_prop": "#FFFFFF",
            "shp_prop": "Sungai Jawi"
        }
    ],
    "Land_use": [
        {
            "shp_name": "Land Use 2019",
            "color_prop": "#000000",
            "shp_prop": "Grassland"
        },
   ]
}

Now, I need help in merging the color_prop and shp_prop into arrays within each object. The desired output should be like this:

{
    "Administration": [
        {
            "shp_name": "Village Boundary",
            "color_prop": ["#000000","#FFFFFF"],
            "shp_prop": ["Batu Ampar","Sungai Jawi"]
        },
    ],
    "Land_use": [
        {
            "shp_name": "Land Use 2019",
            "color_prop": ["#000000"],
            "shp_prop": ["Grassland"]
        },
    ]
 }

If anyone could assist me with this issue, I would greatly appreciate it. Thank you.

javascript arrays json object

Answer 1

Answer №1

One possible solution is to create a function that can transform "rows" into "columns".

function convertToColumns(rows) {
  const columns = {};
  const keys = Object.keys(rows[0]);
  for (const key of keys) columns[key] = [];
  for (const row of rows) {
    for (const key of keys) {
      columns[key].push(row[key]);
    }
  }
  return columns;
}

This function works on data structured like this:

[
  { a: 1, b: 2 },
  { a: 3, b: 4 },
]

The output will be:

{ a: [1, 3], b: [2, 4] }

By using this function, you can transform your groups into the desired format as shown below:

for (const category in items) {
  const columns = convertToColumns(items[category]);
  // replace 'shp_name' with its first value instead of an array
  columns.shp_name = columns.shp_name[0];
  items[category] = columns;
}

In case you want to keep the original object intact, change items[category] = columns to result[category] = columns (where result is defined as const result = {} before starting the loop).

Answer 2

One possible solution is to create a function that can transform "rows" into "columns".

function convertToColumns(rows) {
  const columns = {};
  const keys = Object.keys(rows[0]);
  for (const key of keys) columns[key] = [];
  for (const row of rows) {
    for (const key of keys) {
      columns[key].push(row[key]);
    }
  }
  return columns;
}

This function works on data structured like this:

[
  { a: 1, b: 2 },
  { a: 3, b: 4 },
]

The output will be:

{ a: [1, 3], b: [2, 4] }

By using this function, you can transform your groups into the desired format as shown below:

for (const category in items) {
  const columns = convertToColumns(items[category]);
  // replace 'shp_name' with its first value instead of an array
  columns.shp_name = columns.shp_name[0];
  items[category] = columns;
}

In case you want to keep the original object intact, change items[category] = columns to result[category] = columns (where result is defined as const result = {} before starting the loop).

JavaScript - Organizing Objects

Answer №1

Similar questions

navigate to a different section on the page with a series of visuals preceding it

Is it possible to generate distance between 2 elements without utilizing padding or margin?

Get an ICS file as text using JQuery

Retrieve relationship data from tables as JSON format, where there is a one-to-many connection

Ways to retrieve numerous values from an array

Tips for highlighting text in a textarea using jQuery or JavaScript

Issue with saving cookie from Express.js backend to Nuxt.js frontend

What is the best way to send information from child components to their parent in React

Error: Unable to access attachShadow property as it is null and cannot be read

How can we include identical item names within a single JavaScript object?

JavaScript - Two tables shown in parallel

Arrange the array based on the order of the enumeration rather than its values

Vue.js video player component displays at a width of 100 pixels

What is the most effective method for comparing and updating objects within arrays or lists in frontend Angular applications using TypeScript?

Is there a syntax error in Javascript when using a string and variable with the GET method?

Tips for testing and generating test scenarios for AngularJS within the Eclipse environment

Flask causing AJAX Request to encounter a CORS Policy issue

Nested ListView configuration

Selecting DigitalOcean city based on user location in Node.js

Detect if a value is a member of an array in Swift