TypeScript object handling-CodePudding

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.

CodePudding user response：

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".

CodePudding user response：

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);