Reorganize the data in a different manner (collections of items instead of individual items linked to groups)

Question

Reorganize the data in a different manner (collections of items instead of individual items linked to groups)

Is there a way to create a function that converts data from `DevicesType` to `GroupsType` below? Instead of having a list of devices showing the groups they belong to, I need a list of groups with their respective devices.

type DevicesType = {
  id: string
  name: string
  status: "OK" | "FAULTY"
  groups: {
    id: string
    name: string
  }[]
}[]

type GroupsType = {
  id: string
  name: string
  devices: {
    id: string
    name: string
    status: "OK" | "FAULTY"
  }[]
}[]

For example:

const devicesFromBackend: DevicesType = [
  {
    id: "d1",
    name: "device 1",
    status: "OK",
    groups: [
      {
        id: "g1",
        name: "group 1"
      },
      {
        id: "g2",
        name: "group 2"
      }
    ]
  },
  {
    id: "d2",
    name: "device 2",
    status: "FAULTY",
    groups: [
      {
        id: "g2",
        name: "group 2"
      },
      {
        id: "g3",
        name: "group 3"
      }
    ]
  }
];

I aim to achieve this in order to display tables for each group with a list of their corresponding devices.

javascript typescript

Answer 1

Answer №1

Here is a potential solution that functions without any external dependencies

function convertDevicesToGroups(devices: DevicesType): GroupsType {
    // Separating groups
    const groups = devices.map((d) => d.groups).                            // Extracting groups
        reduce((g, i = []) => i.concat(...g)).                              // Converting from 2D to 1D
        filter((g, i, self) => i === self.findIndex((e) => e.id === g.id)); // Removing duplicates


    return groups.map((group) => {
        const belongDevices = devices.
            filter((d) => d.groups.find((g) => g.id === group.id)).        // Filtering devices that belong to a group
            map((d) => ({ id: d.id, name: d.name, status: d.status }));    // Extracting required properties

        return {
            ...group,
            devices: belongDevices,
        }; 
    });
}

Go to the playground for the full code and an example.

Additionally, I suggest some minor enhancements to your types for better readability.

type Group = {
  id: string
  name: string
  devices: {
    id: string
    name: string
    status: "OK" | "FAULTY"
  }[]
}

type Groups = Group[]

type Device = {
  id: string
  name: string
  status: "OK" | "FAULTY"
  groups: {
    id: string
    name: string
  }[]
}

type Devices = Device[]

It would be beneficial to eliminate the implicit circular dependency, but that would involve a more extensive refactoring unrelated to your current issue

Answer 2

Here is a potential solution that functions without any external dependencies

function convertDevicesToGroups(devices: DevicesType): GroupsType {
    // Separating groups
    const groups = devices.map((d) => d.groups).                            // Extracting groups
        reduce((g, i = []) => i.concat(...g)).                              // Converting from 2D to 1D
        filter((g, i, self) => i === self.findIndex((e) => e.id === g.id)); // Removing duplicates


    return groups.map((group) => {
        const belongDevices = devices.
            filter((d) => d.groups.find((g) => g.id === group.id)).        // Filtering devices that belong to a group
            map((d) => ({ id: d.id, name: d.name, status: d.status }));    // Extracting required properties

        return {
            ...group,
            devices: belongDevices,
        }; 
    });
}

Go to the playground for the full code and an example.

Additionally, I suggest some minor enhancements to your types for better readability.

type Group = {
  id: string
  name: string
  devices: {
    id: string
    name: string
    status: "OK" | "FAULTY"
  }[]
}

type Groups = Group[]

type Device = {
  id: string
  name: string
  status: "OK" | "FAULTY"
  groups: {
    id: string
    name: string
  }[]
}

type Devices = Device[]

It would be beneficial to eliminate the implicit circular dependency, but that would involve a more extensive refactoring unrelated to your current issue

Answer 3

Answer №2

Below is a potential JavaScript implementation to achieve the desired outcome:

const devices = [
  {
    id: "d1",
    name: "device 1",
    status: "OK",
    groups: [
      {
        id: "g1",
        name: "group 1"
      },
      {
        id: "g2",
        name: "group 2"
      }
    ]
  },
  {
    id: "d2",
    name: "device 2",
    status: "FAULTY",
    groups: [
      {
        id: "g2",
        name: "group 2"
      },
      {
        id: "g3",
        name: "group 3"
      }
    ]
  }
];

const getDeviceGroups = (arr = devices) => (
  Object.values(
    arr.reduce(
      (aggregated, {groups, ...rest}) => ({
        ...aggregated,
        ...groups.reduce(
          (accumulator, {id, name}) => ({
            ...accumulator,
            [id]: id in aggregated
              ? {
                ...aggregated[id],
                devices: aggregated[id].devices.concat([{
                  ...rest
                }])
              }
              : {id, name, devices: [{...rest}]}
          }),
          {}
        )
      }),
      {}
    )
  )
);

console.log(getDeviceGroups());

The approach is detailed within the code comments for reference. Additional explanations can be provided upon request.

Answer 4

Below is a potential JavaScript implementation to achieve the desired outcome:

const devices = [
  {
    id: "d1",
    name: "device 1",
    status: "OK",
    groups: [
      {
        id: "g1",
        name: "group 1"
      },
      {
        id: "g2",
        name: "group 2"
      }
    ]
  },
  {
    id: "d2",
    name: "device 2",
    status: "FAULTY",
    groups: [
      {
        id: "g2",
        name: "group 2"
      },
      {
        id: "g3",
        name: "group 3"
      }
    ]
  }
];

const getDeviceGroups = (arr = devices) => (
  Object.values(
    arr.reduce(
      (aggregated, {groups, ...rest}) => ({
        ...aggregated,
        ...groups.reduce(
          (accumulator, {id, name}) => ({
            ...accumulator,
            [id]: id in aggregated
              ? {
                ...aggregated[id],
                devices: aggregated[id].devices.concat([{
                  ...rest
                }])
              }
              : {id, name, devices: [{...rest}]}
          }),
          {}
        )
      }),
      {}
    )
  )
);

console.log(getDeviceGroups());

The approach is detailed within the code comments for reference. Additional explanations can be provided upon request.

Reorganize the data in a different manner (collections of items instead of individual items linked to groups)

Answer №1

Answer №2

Similar questions

Re-establishing connections in the force-directed graph model

Troubleshooting problem with video recording functionality using HTML 5 media streams

Choosing Between Methods and Computed Properties in Vue.js

Tips for altering the color of the MUI table sort label icon:

Express.js encountered a FetchError due to receiving an invalid JSON response body from https://api.twitter.com

The Highchart formatter function is being called twice on each occasion

Determine the overall sum of rows present within this particular tbody section

The Angular service encounters issues when interacting with REST API

The 'required' validator in Mongoose seems to be malfunctioning

What could be the reason for the Mongoose findAll function causing a 500 error to occur?

What could be causing the styled-component's flex value to not update?

Having trouble retrieving client data on the server-side using Ionic and Express.js

To avoid the browser context menu from appearing when interacting with a d3.js element, simply employ a different way of clicking

Trigger useEffect after prop has been changed

custom vertical tab label text not aligning to the right in material-ui with textAlign

What is the best approach: Referencing schema within properties or including it as an array in Mongoose?

Angular 10 introduces a new feature where BehaviorSubject can now hold and emit two

What is the best way to convert base64 into an image using Node.js?

Encountering the error "ReferenceError: Cannot access 'data' before initialization" during deployment on Vercel

Placeholder variable not specified in radio buttons