Angular 9 Best Practice to handle array with different objects in a Http Request

Question

I'm very new to Angular and also to web development, so if I may use terms not precisely or if I explain my problem a little weird, please forgive ;-)
To the problem:
I work with Angular 9 and am making a http request (get and post) to an API via the HttpModule. The response object (as well as the post object) is a JSON object which amongst other objects includes an array with variable objects:

inputs: [
    {
      id: string,
      sT: string,
      stl: string,
      mCC: number
    },
    {
     id: string,      
     sT: string,
     val: string,
     dT: string
    }

  ]

What I read so far is, that you usually create an interface for the response object, so you can access the objects properties with the name of the property. I did this for all other properties, also for nested ones, but with the array above I have the problem, that the objects are not having the same attributes. What I did is to create an interface for 'Input' with optional attrubutes, like this:

// Single interface with optional attributes

export interface Input {
  id: string;
  sT: string;
  dT?: string;
  val?: string;
  mCC?: number;
  stl?: string;
}

But I feel, that this is not the way of how you are usually typing this sort of object. How do you do this the 'Angularish way'? Or is this more a TS question?

I would be glad to find a best practice for this sort, as I guess I will see this type of object often in the future.

When it comes to object handling, there is no such thing as Angularish way. There is only JS and TS way. And from your interface, it seems about the right approach for optional properties. — Barremian
– Barremian, Commented May 22, 2020 at 9:45
Okay,thank you for your reply! I thought there may be some guideline in Angular, as e.g. it is also suggested to create interfaces instead of classes for the use in http requests (see here: angular.io/guide/http#requesting-a-typed-response). So I thought there may be a completely other way to work with those kinds of object. — i.i.k.
– i.i.k., Commented May 22, 2020 at 10:00

Yoann Augen · Accepted Answer · 2020-05-22 09:58:26Z

1

If you have not idea what kind of attributes will be return you can declare something like that

interface Input{
  [key: string]: any;
}

If you know some of the elements will be always here, you can be more precise

interface Input{
  id: string;
  sT: string;
  [key: string]: string|number;
}

If you know you have a limited random list of elements, as the six of your sample, your solution is ok.

answered May 22, 2020 at 9:58

Yoann Augen

2,0563 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

i.i.k. Over a year ago

I accept your answer for two reasons, you seem to have experience and, furthermore, you give additional information on how to handle this object. Thank you! I did not expect such quick replies on this.

Collectives™ on Stack Overflow

Angular 9 Best Practice to handle array with different objects in a Http Request

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related