TypeScript object handling

Question

I'm new to TS and I'm not sure if i understand it correctly. From my BackEnd I get data, that's looking like this:

{
    "A": [
        {
            "fieldA": 0,
            "fieldB": "A",
            "fieldC": 123,
            "fieldD": 0,
        },
        {
            "fieldA": 0,
            "fieldB": "A",
            "fieldC": 111,
            "fieldD": 0,
        },
        {
            "fieldA": 0,
            "fieldB": "A",
            "fieldC": 99,
            "fieldD": 0,
        },
        {
            "fieldA": 0,
            "fieldB": "A",
            "fieldC": 24,
            "fieldD": 0,
        },
        {
            "fieldA": 0,
            "fieldB": "A",
            "fieldC": 21,
            "fieldD": 0,
        },
        {
            "fieldA": 0,
            "fieldB": "A",
            "fieldC": 11,
            "fieldD": 0,
        },
        {
            "fieldA": 0,
            "fieldB": "A",
            "fieldC": 75,
            "fieldD": 0,
        },
        {
            "fieldA": 0,
            "fieldB": "A",
            "fieldC": 76,
            "fieldD": 0,
        },
        {
            "fieldA": 0,
            "fieldB": "A",
            "fieldC": 13,
            "fieldD": 0,
        }
    ],

And my TypeScript class for this response is looking like this:

export class someDataFromBackend{
  public data: {
    [key: string]: {
      fieldA: string;
      fieldB: number;
      fieldC: string;
      fieldD: number;
    };
  }[];

  constructor(data: any) {
    this.data = data;
  }
}

My problem is that I don't really know how can I call to any of this elements right now. I'd like for example create new Array containing values from all fieldC. Or even something that simple like to print fieldC from 2nd array inside "A" (the one that has value 111).

Even when I try to console.log(someDataFB.data) but it shows that it's undefined.

AhmedSHA256 · Accepted Answer · 2022-10-26 14:35:48Z

3

Your backend is giving you an array of objects named "A". In order to access one of those objects, you have to do the following:

Define an interface for the object, like this:

export interface someObject {
  fieldA: type,
  fieldB: type,
  fieldC: type,
  fieldD: type
}

And then, write console.log(A[index].field) Where index is the index (obviously) of the item you want to select, and field is the field you want to display.

Example: console.log(A[2].fieldB) will return "A".

answered Oct 26, 2022 at 14:35

AhmedSHA256

6834 silver badges28 bronze badges

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

Comments

Garuno · Accepted Answer · 2022-10-26 15:03:42Z

First your typing is wrong. It should look like this:

export class someDataFromBackend{
  public data: {
    [key: string]: {
      fieldA: string;
      fieldB: number;
      fieldC: string;
      fieldD: number;
    }[]; // <--- notice where the [] are
  };
}

And as @AhmedSHA256 already said, it would be useful to define the objects as a separate type, to make everything clearer:

export interface AObjects {
  fieldA: type;
  fieldB: type;
  fieldC: type;
  fieldD: type;
}

export interface ServerData {
  A: AObjects[]; // It is better to specify this explicitly, if you know the value beforehand.
}

export class someDataFromBackend{
  public data: ServerData;
}

Even when I try to console.log(someDataFB.data) but it shows that it's undefined.

This means, that the data you provide to your class in the constructor is undefined. So the loading logic from the Server seems wrong. As you don't show the code in your question, I cannot help you there.

Accessing data is like in most languages: this.data.A[2].fieldB

Creating a new array of only the fieldB values is a little more sophisticated:

const bArray = this.data.A.map(o => o.fieldB);

Thank you. It works perfectly. This example will help me in understanding how it should look in the future

Collectives™ on Stack Overflow

TypeScript object handling

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related