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

Issue encountered while attempting to download a file using DRF with Angular integration

The specified type argument is not compatible with the ObservableInput<any> type

Creating IPv6 Mask from IPv6 Prefix Using Javascript: A Step-by-Step Guide

Using the map operator in an Angular 7 application with rxjs

Position Bootstrap Modal in the center horizontally

Guide to setting up a datePicker in a cellEditorSelector

Encountering an issue while trying to execute the command "ionic cordova build android --prod --release

What is the best way to reset the testing subject between test cases using Jest and TypeScript?

Tips for avoiding the error message "Expected 1 arguments, but got 0" when the specified argument is actually `undefined`

How do I adjust brightness and contrast filters on a base64 URL?

Adding multiple classes to a condition in Angular can be achieved by using the ngClass directive

Is there a way to selectively transfer attributes and behaviors from an interface to a fresh object in typescript?

Difficulty Encountered While Deploying Mean Stack Application on Heroku

Having trouble with the clip-path in d3.js liquid fill gauge

No changes made to Observable when it's empty

What is the process for integrating Angular files into an Express server?

Steps to create an instance method that only accepts the name of another instance method

Async await causing failure in change detection

Angular Pipe: Working with Data Structures in Angular With Nested Arrays and Objects

Add the component view to the webpage's body section