Managing TypeScript objects

Question

Managing TypeScript objects

Just starting out with TypeScript and feeling a bit lost. The data I receive from my BackEnd looks 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 structure for handling this data is as follows:

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

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

My issue at the moment is that I'm struggling to access any of the elements. For example, I want to create a new Array with values from all fieldC. Or perhaps something as simple as printing the fieldC from the second array inside "A" (the one with value 111).

Even when I attempt to console.log(someDataFB.data), it returns undefined.

typescript

Answer 1

Answer №1

Your server is sending an array of objects labeled as "A". To access a specific object from this array, you need to follow these steps:

First, create an interface for the object as shown below:

export interface customObject {
  propertyA: dataType,
  propertyB: dataType,
  propertyC: dataType,
  propertyD: dataType
}

Next, use console.log(A[index].field) where index is the position of the object you want to access and field is the property you want to retrieve.

For example, console.log(A[2].fieldB) will output "A".

Answer 2

Your server is sending an array of objects labeled as "A". To access a specific object from this array, you need to follow these steps:

First, create an interface for the object as shown below:

export interface customObject {
  propertyA: dataType,
  propertyB: dataType,
  propertyC: dataType,
  propertyD: dataType
}

Next, use console.log(A[index].field) where index is the position of the object you want to access and field is the property you want to retrieve.

For example, console.log(A[2].fieldB) will output "A".

Answer 3

Answer №2

Your initial typing is incorrect. It should be structured like this:

export class someDataFromBackend{
  public data: {
    [key: string]: {
      fieldA: string;
      fieldB: number;
      fieldC: string;
      fieldD: number;
    }[]; // <--- take note of the array notation
  };
}

As @AhmedSHA256 mentioned, it would be beneficial to define the objects as distinct types for clarity:

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

export interface ServerData {
  A: AObjects[]; // It's advisable to specify this explicitly if the value is known beforehand.
}

export class someDataFromBackend{
  public data: ServerData;
}

When I attempt to console.log(someDataFB.data), it returns as undefined.

This indicates that the data passed to your class in the constructor is undefined. The retrieval logic from the Server appears to be incorrect. Since your code isn't provided in the question, I'm unable to assist further.

Accessing data follows the typical pattern in most languages: this.data.A[2].fieldB

To create a new array containing only the fieldB values is a bit more involved:

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

Answer 4

Your initial typing is incorrect. It should be structured like this:

export class someDataFromBackend{
  public data: {
    [key: string]: {
      fieldA: string;
      fieldB: number;
      fieldC: string;
      fieldD: number;
    }[]; // <--- take note of the array notation
  };
}

As @AhmedSHA256 mentioned, it would be beneficial to define the objects as distinct types for clarity:

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

export interface ServerData {
  A: AObjects[]; // It's advisable to specify this explicitly if the value is known beforehand.
}

export class someDataFromBackend{
  public data: ServerData;
}

When I attempt to console.log(someDataFB.data), it returns as undefined.

This indicates that the data passed to your class in the constructor is undefined. The retrieval logic from the Server appears to be incorrect. Since your code isn't provided in the question, I'm unable to assist further.

Accessing data follows the typical pattern in most languages: this.data.A[2].fieldB

To create a new array containing only the fieldB values is a bit more involved:

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

Managing TypeScript objects

Answer №1

Answer №2

Similar questions

Symfony using Vite with Vue 3 encounters an error: Uncaught ReferenceError - exports is undefined

I am having trouble getting ngFor to properly render my accessible data. Whenever I attempt to use it, it ends up breaking my code. Can someone please

What is the process for eliminating the perplexing "default" attribute that has been inserted into JSON?

Unlock the power of TypeScript's inheritance by utilizing static methods for type

Unable to locate the reference to 'Handlebars' in the code

The module '@angular/core' could not be located in the '@angular/platform-browser' and '@angular/platform-browser-dynamic' directories

What steps should I take to resolve the eslint issue indicating that a TypeScript props interface is not being utilized, even though it is being used?

Typescript: When using ts-node-dev, an error occurred while trying to import express due to an unexpected

The correct assertion of types is not carried out during the initialization of generics through a constructor

Designate as a customizable class property

Tips for implementing <mat-progress-bar> in .ts file when making API service requests with Angular

Tips for wrapping text in a column within material-ui's DataGrid

How can I use Angular to dynamically open a video that corresponds to a clicked image?

Uncovering the mystery of retrieving form values from dynamic HTML in Angular 2

Encountering an issue with TypeScript error code TS2322 when trying to assign a className to the @

Assigning a value to an Angular class variable within the subscribe method of an HTTP

Customizable parameters in a React component

What is the process for extracting Excel .xlsx information from a POST request body in an Express API?

Objects in the array are failing to sort in the expected sequence

Dealing with "Cannot find name" errors in Typescript when working with React components