Tips for showcasing an array containing two different types of objects in Angular

Question

Tips for showcasing an array containing two different types of objects in Angular

After sending a request to a remote server, I am returned with a JSON array. However, the array can contain two different types of JSON objects:

[
  {
    "country": "USA",
    "caseCount": 561,
    "caseDates": [],
  },
  {
    "country": "Canada",
    "errorDescription": "Error"
  }
]

To handle this, I have created two interfaces and a variable that can hold either of these types:

export interface CountryData {
  country: string;
  caseCount: number;
  caseDates: any[];
}

export interface ErrorData {
  country: string;
  errorDescription: string;
}

countryData!: Observable<(CountryData| ErrorData)[]>;

When trying to display this data in my template with

*ngFor="let data of countryData | async"

, it only displays values common to both interfaces, such as the country field. I would like to modify this behavior to render values based on the type of the data object.

angular typescript

Answer 1

Answer №1

In order to handle different types of data in TypeScript, you need to utilize a concept known as type narrowing.

Here's an example:

interface UserData {
  username: string;
  age: number;
  email: string;
}

interface ErrorDetails {
  message: string;
}

userDataToString(data: UserData | ErrorDetails) {
  if (!data) {
    // When data is null or undefined
    return typeof data;
  } else if ('message' in data) {
    // If it's an error object
    return `ERROR: ${data.message}`;
  } else {
    // If it's user data
    return `${data.username} (${data.age} years old, email: ${data.email})`;
  }
}

Answer 2

In order to handle different types of data in TypeScript, you need to utilize a concept known as type narrowing.

Here's an example:

interface UserData {
  username: string;
  age: number;
  email: string;
}

interface ErrorDetails {
  message: string;
}

userDataToString(data: UserData | ErrorDetails) {
  if (!data) {
    // When data is null or undefined
    return typeof data;
  } else if ('message' in data) {
    // If it's an error object
    return `ERROR: ${data.message}`;
  } else {
    // If it's user data
    return `${data.username} (${data.age} years old, email: ${data.email})`;
  }
}

Tips for showcasing an array containing two different types of objects in Angular

Answer №1

Similar questions

What is the process for including headers while establishing a connection to a websocket?

The definition of "regeneratorRuntime" is missing in the rete.js library

Expanding a JSON type in Typescript to accommodate interfaces

Setting up Emotion js in a React TypeScript project using Vite 4

Steps to filter types by a singular property assessment

Transformation of Ionic 2 ScreenOrientation Plugin

What is the proper way to validate a property name against its corresponding value?

How to set the type of an object property to a string based on a string from an array of strings in TypeScript

Is there a way to avoid waiting for both observables to arrive and utilize the data from just one observable within the switchmap function?

How can I receive live notifications for a document as soon as it is created?

Issue encountered while utilizing property dependent on ViewChildren

Can someone please explain how to display a specific element from a JSON Array?

The TypeScript compiler is unable to locate the identifier 'Symbol' during compilation

Splitting code efficiently using TypeScript and Webpack

Guide on how to duplicate a form upon clicking an "add" link in Angular 2

Snackbar and RTK Query update trigger the error message: "Warning: Cannot update during an existing state transition."

The object literal can only define properties that are already known, and 'data' is not found in the type 'PromiseLike<T>'

Sending information from the parent component to the child Bootstrap Modal in Angular 6

Guidelines on adjusting the hue of the card

Tips for establishing communication between a server-side and client-side component in Next.js