What is the best way to utilize Object.keys() for working with nested objects?

Question

What is the best way to utilize Object.keys() for working with nested objects?

When working with nested objects, I am trying to access the properties using Object.keys() and forEach(). However, I am encountering an issue when attempting to access the nested keys filteringState[item][el].

Is there a specific way to write a function for this scenario?

interface InitialStateTypes {
    country: {
        "italy": boolean,
    },
    board: {
        "full": boolean,
    },
    transport: {
        "bus": boolean,
        "own": boolean
    },
}

interface FilteringDataTypes {
    country: string[],
    board: string[],
    transport: string[],
}

const collectFilteringData = (filteringState: InitialStateTypes) => {
    let filteringData = <FilteringDataTypes>{};

    Object.keys(filteringState).forEach((item) => {
        Object.keys(filteringState[item]).forEach((el) => {
            if (filteringState[item][el]) {
                if (!filteringData[item]) {
                    filteringData[item] = [el];
                } else {
                    filteringData[item] = [...filteringData[item], el];
                }
            }
        });
    });
    return filteringData;
};


export default collectFilteringData;

typescript nested-object

Answer 1

Answer №1

To access specific keys within an object in TypeScript, utilize the keyof operator.

For instance:

type Person = { name: string; age: number };
type Key = keyof Person;

For more information, check out this resource: https://www.typescriptlang.org/docs/handbook/2/keyof-types.html

When dealing with nested data:

type Data = { info: {x: number; y: number} };
type Key = keyof Data["info"];

Answer 2

To access specific keys within an object in TypeScript, utilize the keyof operator.

For instance:

type Person = { name: string; age: number };
type Key = keyof Person;

For more information, check out this resource: https://www.typescriptlang.org/docs/handbook/2/keyof-types.html

When dealing with nested data:

type Data = { info: {x: number; y: number} };
type Key = keyof Data["info"];

Answer 3

Answer №2

When using the keys method, things can get a bit messy because it only expects to output strings. (This is understandable since JS Object keys are typically strings, but TypeScript handles this differently)

Below is one possible way to handle this:

interface InitialStateTypes {
  country: {
      "italy": boolean,
  },
  board: {
      "full": boolean,
  },
  transport: {
      "bus": boolean,
      "own": boolean
  },
}

interface FilteringDataTypes {
  country: string[],
  board: string[],
  transport: string[],
}

const collectFilteringData = (filteringState: InitialStateTypes):FilteringDataTypes => {
  let filteringData = {} as FilteringDataTypes

  (Object.keys(filteringState) as Array<keyof InitialStateTypes>).forEach((item) => {
      (Object.keys(filteringState[item]) as Array<keyof InitialStateTypes[typeof item]>).forEach((el) => {
          if (filteringState[item][el]) {
              if (!filteringData[item]) {
                  filteringData[item] = [el];
              } else {
                  filteringData[item] = [...filteringData[item], el];
              }
          }
      });
  });
  return filteringData;
};


export default collectFilteringData

In this code example, type assertion is used to specify the expected types for TypeScript.
It ensures the correct types are passed to the forEach method.
The complexity arises from the nested structure, requiring another type assertion to pass in the value for typeof item from the first forEach.

When formatted with Prettier, the code looks like this:

const collectFilteringData = (
  filteringState: InitialStateTypes
): FilteringDataTypes => {
  let filteringData = {} as FilteringDataTypes;

  (Object.keys(filteringState) as Array<keyof InitialStateTypes>).forEach(
    (item) => {
      (
        Object.keys(filteringState[item]) as Array<
          keyof InitialStateTypes[typeof item]
        >
      ).forEach((el) => {
        if (filteringState[item][el]) {
          if (!filteringData[item]) {
            filteringData[item] = [el];
          } else {
            filteringData[item] = [...filteringData[item], el];
          }
        }
      });
    }
  );
  return filteringData;
};

Note

This answer is based on TypeScript 4.6.2, where the keys method is typed as follows:

keys(o: object): string[];

Answer 4

When using the keys method, things can get a bit messy because it only expects to output strings. (This is understandable since JS Object keys are typically strings, but TypeScript handles this differently)

Below is one possible way to handle this:

interface InitialStateTypes {
  country: {
      "italy": boolean,
  },
  board: {
      "full": boolean,
  },
  transport: {
      "bus": boolean,
      "own": boolean
  },
}

interface FilteringDataTypes {
  country: string[],
  board: string[],
  transport: string[],
}

const collectFilteringData = (filteringState: InitialStateTypes):FilteringDataTypes => {
  let filteringData = {} as FilteringDataTypes

  (Object.keys(filteringState) as Array<keyof InitialStateTypes>).forEach((item) => {
      (Object.keys(filteringState[item]) as Array<keyof InitialStateTypes[typeof item]>).forEach((el) => {
          if (filteringState[item][el]) {
              if (!filteringData[item]) {
                  filteringData[item] = [el];
              } else {
                  filteringData[item] = [...filteringData[item], el];
              }
          }
      });
  });
  return filteringData;
};


export default collectFilteringData

In this code example, type assertion is used to specify the expected types for TypeScript.
It ensures the correct types are passed to the forEach method.
The complexity arises from the nested structure, requiring another type assertion to pass in the value for typeof item from the first forEach.

When formatted with Prettier, the code looks like this:

const collectFilteringData = (
  filteringState: InitialStateTypes
): FilteringDataTypes => {
  let filteringData = {} as FilteringDataTypes;

  (Object.keys(filteringState) as Array<keyof InitialStateTypes>).forEach(
    (item) => {
      (
        Object.keys(filteringState[item]) as Array<
          keyof InitialStateTypes[typeof item]
        >
      ).forEach((el) => {
        if (filteringState[item][el]) {
          if (!filteringData[item]) {
            filteringData[item] = [el];
          } else {
            filteringData[item] = [...filteringData[item], el];
          }
        }
      });
    }
  );
  return filteringData;
};

Note

This answer is based on TypeScript 4.6.2, where the keys method is typed as follows:

keys(o: object): string[];

What is the best way to utilize Object.keys() for working with nested objects?

Answer №1

Answer №2

Note

Similar questions

Using Node.js and Typescript to bring in external modules from

Troubleshooting the ReferenceError: Blob is not defined problem with the heic2any library in a Next.js application

Creating a web application using Aframe and NextJs with typescript without the use of tags

Execute the React Native application on Windows by using the command npx react-native run-windows

Automatically divide the interface into essential components and additional features

Mastering the art of debugging feathersjs with typescript on VS Code

What is the best way to retrieve a soft deleted entity from typeorm in a postgreSQL database?

Leverage JSON files for pagination in NextJS

Incompatibility Issues with TypeScript Function Overloading

Error TS2339: Property does not exist on type 'object' - Typescript arrow function issue

This TypeScript error indicates that the variable may be undefined (Error code: 18048)

Using Long Polling with Angular 4

I am experiencing an issue with applying responsiveFontSize() to the new variants in Material UI Typography

Is it possible to establish role-based access permissions once logged in using Angular 6?

What is the best way to limit the types of function parameters in TypeScript based on whether the parameter index is even or odd?

Oops! The program encountered an issue where it was unable to access the properties of an undefined variable, specifically while trying to

Using TypeScript and NestJs: Spread types can only be generated from object types

What is the best way to link this to a function in AngularIO's Observable::subscribe method?

What kind of Antd type should be used for the form's onFinish event?

Minimize the quantity of data points displayed along the X-axis in a highcharts graph