How to properly cast interfaces when using Angular 4's HttpClient to fetch items

Question

How to properly cast interfaces when using Angular 4's HttpClient to fetch items

Here is the layout of my interface

interface IPlacesResult {
  summary: {
    queryTime: number;
    // ...
  };
  results: {
    id: string;
    // ...
    address: {
      streetNumber: number;
      // ...
    };
  }[];
}

To populate this interface, I use

this.http.get<IPlacesResult>(environment.azure.locationService.url ...

and then proceed to filter for unique values

.pipe(
  map(result => {
    const resultsMap = new Map<string, IPlacesResult['results']>();
    result.results.forEach(r => {
      const rKey = PlaceSearchResult.toAddressFull(r.address.streetNumber, r.address.streetName,
        r.address.municipalitySubdivision, r.address.countrySubdivision, r.address.postalCode);
      if (!resultsMap.has(rKey)) {
        resultsMap.set(rKey, r); // This line throws an error 
      }
...

The issue arises in the specified line, displaying the following message

[ts]
Argument of type 
  '{ id: string; type: string; score: number; address: { streetNumber: number; streetName: string; m...' 
is not assignable to parameter of type 
  '{ id: string; type: string; score: number; address: { streetNumber: number; streetName: string; m...'.
Property 'includes' is missing in type 
  '{ id: string; type: string; score: number; address: { streetNumber: number; streetName: string; m...'.

Attempts using the as operator have also failed with the same error message.

How should I go about successfully filtering the items?

javascript angular typescript

Answer 1

Answer №1

When dealing with the data structure IPlacesResult['results'], it is important to note that it represents an array of a specific type:

{
  id: string;
  type: string;
  score: number;
  address: {
    streetNumber: number;
    streetName: string;
    municipalitySubdivision: string;
    postalCode: number;
    countrySubdivision: string;
  };
}

To resolve any issues related to this, the focus should be on extracting the type of the individual element within the array rather than the array itself.

While referencing the element type directly from the array may prove challenging, another effective approach involves creating separate interfaces as illustrated below:

interface IResult {
  id: string;
  type: string;
  score: number;
  address: {
    streetNumber: number;
    streetName: string;
    municipalitySubdivision: string;
    postalCode: number;
    countrySubdivision: string;
  };
}


interface IPlacesResult {
  summary: {
    queryTime: number;
    numResults: number;
    totalResults: number;
  };
  results: IResult[];
}

By structuring the data in this manner, we can easily reference and work with the IResult interface individually for enhanced clarity and flexibility.

Answer 2

When dealing with the data structure IPlacesResult['results'], it is important to note that it represents an array of a specific type:

{
  id: string;
  type: string;
  score: number;
  address: {
    streetNumber: number;
    streetName: string;
    municipalitySubdivision: string;
    postalCode: number;
    countrySubdivision: string;
  };
}

To resolve any issues related to this, the focus should be on extracting the type of the individual element within the array rather than the array itself.

While referencing the element type directly from the array may prove challenging, another effective approach involves creating separate interfaces as illustrated below:

interface IResult {
  id: string;
  type: string;
  score: number;
  address: {
    streetNumber: number;
    streetName: string;
    municipalitySubdivision: string;
    postalCode: number;
    countrySubdivision: string;
  };
}


interface IPlacesResult {
  summary: {
    queryTime: number;
    numResults: number;
    totalResults: number;
  };
  results: IResult[];
}

By structuring the data in this manner, we can easily reference and work with the IResult interface individually for enhanced clarity and flexibility.

How to properly cast interfaces when using Angular 4's HttpClient to fetch items

Answer №1

Similar questions

Having trouble converting a string to an array in JS? Splitting doesn't seem to be doing

Passing specific props to child components based on their type in a React application using TypeScript

HTML5 Drag and Drop: How to Stop Drag and Drop Actions from Occurring Between a Browser and Browser Windows

Is there a way to adjust the font size for the label in mat-step?

No data received from AJAX response

Create dynamic elements in Vue.js components based on an object

Can the table be automatically updated on page reload?

Troubleshooting: Issue with Vue component template iteration

What is the best way to make a class available in the global namespace within a TypeScript module?

Position the text alongside the thumbnail rather than in the center

Whenever I attempt to use for or while loops in my application, it consistently crashes

Ways to verify the status within the DataTable?

Using Javascript to save basic high scores to a server

Nuxt and Express server are unable to receive API requests when in production mode and the /dist directory

What is the method for updating the form action to alter the hash without causing a page reload?

Steps to stop mat-spinner upon receiving Job Success/Failure Notification from the backend

What is the process for subscribing to or obtaining Err from the service?

Combining arrays to create a single object: A step-by-step guide

Error alert! A token error has been detected while executing Angular tests under <Jasmine>

What's the best way to unpack the gzip data that Ajax sends to JavaScript?