Guide to organizing an object containing a named list of objects by a specific field in Typescript

Question

Guide to organizing an object containing a named list of objects by a specific field in Typescript

I've been working with data in JavaScript, and so far I've been able to do everything I needed on my own. However, I've hit a roadblock.

Explaining the structure of my data is tricky, so let's create a schema for it. Here's what I have:

    obj: {[key: string]: {name: string, type: string}[]} = 
    {
        "animals": [
          {name: "Louis", type: "dog"},
          {name: "John", type: "cat"},
          {name: "Jordan", type: "dog"}
        ],
        "cars" : [
          {name: "alpha", type: "ferrari"},
          {name: "beta", type: "ferrari"},
          {name: "charlie", type: "mercedes"}
        ]
     }

My goal is to group each object by type within the list. It should look like this:

obj: {[key: string]: {[key: string]: {name: string, type: string}[]}} = 
{
    "animals": {
      "dog": [
          {name: "Louis", type: "dog"},
          {name: "Jordan", type: "dog"}
      ],
      "cat": [
          {name: "John", type: "cat"}
      ]
    },
    "cars" : {
      "ferrari": [
          {name: "alpha", type: "ferrari"},
          {name: "beta", type: "ferrari"}
      ],
      "mercedes": [
          {name: "charlie", type: "mercedes"}   
      ]
    }
}

Any suggestions on how to accomplish this?

javascript json typescript data-structures structure

Answer 1

Answer №1

For those seeking a solution related to TypeScript, the code snippet below might be what you need:

interface Data {
  name: string;
  type: string;
}

type GroupedData = {
  [index: string]: Record<string, Data[]>;
};

const organizedResults = Object.entries(object).reduce<GroupedData>((accumulator, [key, values]) => {
  const grouped: Record<string, Data[]> = {};

  for (const val of values) {
    if (grouped[val.type] === undefined) {
      grouped[val.type] = [val];
    } else {
      grouped[val.type].push(val);
    }
  }

  return {
    ...accumulator,
    [key]: grouped,
  };
}, {});

Answer 2

For those seeking a solution related to TypeScript, the code snippet below might be what you need:

interface Data {
  name: string;
  type: string;
}

type GroupedData = {
  [index: string]: Record<string, Data[]>;
};

const organizedResults = Object.entries(object).reduce<GroupedData>((accumulator, [key, values]) => {
  const grouped: Record<string, Data[]> = {};

  for (const val of values) {
    if (grouped[val.type] === undefined) {
      grouped[val.type] = [val];
    } else {
      grouped[val.type].push(val);
    }
  }

  return {
    ...accumulator,
    [key]: grouped,
  };
}, {});

Guide to organizing an object containing a named list of objects by a specific field in Typescript

Answer №1

Similar questions

Encountering TypeScript error in the beforeRouteUpdate hook with Vue and vue-property-decorator

"Troubleshooting: Text Added to Element in JavaScript Not Appearing

Show a jQuery box when hovering and disappear when the mouse leaves

Modify the label contents to reflect the selected file, rather than using the default text

The JavaScript file failed to load

Using React to iterate through the child components of the parent

Invalid JSON Error in C# with JSON

Here is a new version: "AJAX button enables updating a single row in SQLite database through PHP."

What is the best way to integrate Vuex store within the router of a Vue 3 SSR application?

Setting the default value for ngModel does not receive any information from the model

Guidelines on extracting information from a POST request, evaluating it based on a specified criteria, and providing a corresponding feedback

Tracking File Upload Progress with PHP and Ajax

Logging in Angular can be accomplished using "console.log"

Issues with Drupal's $get function have been preventing the retrieval of complete

Unable to transmit data to CodeIgniter controller through ajax communication

Ensure that the number is valid using Express Validator in Node.js

Struggling to add a line break in my code

Incorporating the Three.js EffectComposer into your 8th Wall project

SlidingPane header in React disappearing behind Nav bar

Utilizing AJAX and PHP POST to dynamically refresh innerHTML content with MySQL data updates