Typescript: Unfiltering a string array

Question

Typescript: Unfiltering a string array

Seeking assistance with TypeScript syntax as a beginner.

I'm struggling to refactor this code in order to retrieve the full list of serviceBranches. Currently, there is filtering and mapping resulting in only one serviceBranch being returned from our API. I have attempted removing filters without success. Can someone guide me on how to fetch all serviceBranches by eliminating the correct filters?

Thank you in advance.

public async personNews(serviceBranch?: string[]): Promise<INews> {
    const fetchResult: IPersonNewsFetchResultEntry[] = await this._get('api/person/news/', newsSchema, true) as IPersonNewsFetchResultEntry[];
    const serviceBranches: string[] = (serviceBranch !== undefined ? serviceBranch : fetchResult.filter((entry: IPersonNewsFetchResultEntry, index: number, array: IPersonNewsFetchResultEntry[]): boolean => { 
      return entry.niveauID === NewsLevel.ServiceBranch && array.findIndex((value: IPersonNewsFetchResultEntry): boolean => {
        return entry.unitID === value.unitID;
      }) === index;
    }).map((entry: IPersonNewsFetchResultEntry): string => {
      return entry.unitID;
    }));

typescript typescript2.0

Answer 1

Answer №1

Why is explicit typing necessary in all instances?

Could it be due to

this._get('api/person/news/', newsSchema, true);

returning a type of any?

By making some adjustments and removing specific types, the code becomes easier to understand

public async fetchNewsForPerson(serviceBranch?: string[]): Promise<INews> {
  const data = await this._get('api/person/news/', newsSchema, true);

  let selectedServiceBranches: string[] = [];

  if(serviceBranch) {
    selectedServiceBranches = serviceBranch;
    return;
  }

  selectedServiceBranches = data.filter((entry, index, array) => { 
    return entry.niveauID === NewsLevel.ServiceBranch
        && array.findIndex(({unitID}) => entry.unitID === unitID) === index;
    }).map(entry => entry.unitID)
}

Answer 2

Why is explicit typing necessary in all instances?

Could it be due to

this._get('api/person/news/', newsSchema, true);

returning a type of any?

By making some adjustments and removing specific types, the code becomes easier to understand

public async fetchNewsForPerson(serviceBranch?: string[]): Promise<INews> {
  const data = await this._get('api/person/news/', newsSchema, true);

  let selectedServiceBranches: string[] = [];

  if(serviceBranch) {
    selectedServiceBranches = serviceBranch;
    return;
  }

  selectedServiceBranches = data.filter((entry, index, array) => { 
    return entry.niveauID === NewsLevel.ServiceBranch
        && array.findIndex(({unitID}) => entry.unitID === unitID) === index;
    }).map(entry => entry.unitID)
}

Answer 3

Answer №2

This function appears to be quite complex and difficult for a human to interpret easily. Let's improve its readability:

public async fetchPersonNews(serviceBranch?: string[]): Promise<INews> {
  const result: IPersonNewsFetchResultEntry[] = (await this._get(
    'api/person/news/',
    newsSchema,
    true,
  )) as IPersonNewsFetchResultEntry[]
  const branches: string[] =
    serviceBranch !== undefined
      ? serviceBranch
      : result
          .filter(
            (
              entry: IPersonNewsFetchResultEntry,
              index: number,
              array: IPersonNewsFetchResultEntry[],
            ): boolean => {
              return (
                entry.niveauID === NewsLevel.ServiceBranch &&
                array.findIndex(
                  (value: IPersonNewsFetchResultEntry): boolean => {
                    return entry.unitID === value.unitID
                  },
                ) === index
              )
            },
          )
          .map((entry: IPersonNewsFetchResultEntry): string => {
            return entry.unitID
          })

It is now more apparent that the result is initially filtered, and then the selected items are mapped to extract just their unitID.

Without additional context, it is unclear what specific logic or data structure you require. You can adjust the code accordingly - remove the filter() call for all results, eliminate the map() call to return entire objects instead of just unitID, or modify the filtering criteria within the filter method.

Answer 4

This function appears to be quite complex and difficult for a human to interpret easily. Let's improve its readability:

public async fetchPersonNews(serviceBranch?: string[]): Promise<INews> {
  const result: IPersonNewsFetchResultEntry[] = (await this._get(
    'api/person/news/',
    newsSchema,
    true,
  )) as IPersonNewsFetchResultEntry[]
  const branches: string[] =
    serviceBranch !== undefined
      ? serviceBranch
      : result
          .filter(
            (
              entry: IPersonNewsFetchResultEntry,
              index: number,
              array: IPersonNewsFetchResultEntry[],
            ): boolean => {
              return (
                entry.niveauID === NewsLevel.ServiceBranch &&
                array.findIndex(
                  (value: IPersonNewsFetchResultEntry): boolean => {
                    return entry.unitID === value.unitID
                  },
                ) === index
              )
            },
          )
          .map((entry: IPersonNewsFetchResultEntry): string => {
            return entry.unitID
          })

It is now more apparent that the result is initially filtered, and then the selected items are mapped to extract just their unitID.

Without additional context, it is unclear what specific logic or data structure you require. You can adjust the code accordingly - remove the filter() call for all results, eliminate the map() call to return entire objects instead of just unitID, or modify the filtering criteria within the filter method.

Typescript: Unfiltering a string array

Answer №1

Answer №2

Similar questions

Methods for invoking a JavaScript function from TypeScript within an Angular2 application

A powerful trio: Axios, Typescript, and Promises

Setting up a Variable with an Object Attribute in Angular

SQL Exception: The value for the first parameter is not defined

Encountering difficulty invoking a component method from d3's call() function

What is the purpose of specifying the props type when providing a generic type to a React functional component?

What is the best way to showcase two different arrays' data in a single Angular view?

Angular rxjs Distinctions

What steps should I follow to utilize a JavaScript dependency following an NPM installation?

The type definition file for 'jest' cannot be located, despite the fact that jest has been successfully installed

Interacting between Angular Child and Parent components

New feature in Next.js 13: Utilizing a string within className

Creating a React component with multiple prop types using Typescript

Trouble with selectionChange event in mat-select component in Angular 13

Error: Promises must be managed correctly

I want to use Angular and TypeScript to play a base64 encoded MP3 file

Testing Angular 2 components with material icons and images

Having issues with using the class selector in SVG.select() method of the svg.js library when working with TypeScript

Time taken for a webpage to finish loading

Utilize useState and useEffect to efficiently sort through an item list based on its current state