What is the best way to retrieve the attributes of a nested object within Angular?

I am working with a Model-class that looks like this:

export class Drivefunction{
public Injection: Injection;
public df_uid_machine_injsiz:string;
public Motor_Cable_IEC: Motor_cable;
...

In my display.component.ts file, I have a function called fillDrivefunctions() that populates an array of Drivefunctions.

fillDrivefunctions(){
  this.machineService.getDrivefunctions(this.injectionID)
    .subscribe((df:Drivefunction[])=> {
      this.drivefunctions = df;
      console.log(this.drivefunctions)
    });
}

I use console.log to check if the JSON objects are properly filled.

https://i.sstatic.net/nffdV.jpg

All objects and nested objects are filled correctly!

In my HTML file, I iterate over the drivefunction[] array using ngFor. While I can access string properties without any issue, attempting to access a nested object results in an error message "cannot read property of undefined", even though it is filled correctly.

Do I need to subscribe separately to these nested objects?

This is how it looks in my HTML:

<ion-list *ngFor="let drivefunction of this.drivefunctions; ">
    <ion-item> 
       <ion-label>{{drivefunction.Injection.inj_uid_machine_injsiz}}</ion-label>
    </ion-item>
</ion-list>

Answer №1

It appears there may be a typo issue.

After reviewing the provided HTML code:

<ion-label>{{drivefunction.Injection.inj_uid_machine_injsiz}}</ion-label>

Upon inspecting the console screenshot, it is evident that Injection is in lowercase. Please update to:

<ion-label>{{drivefunction.injection.inj_uid_machine_injsiz}}</ion-label>

Additionally, modify the Drivefunction class accordingly:

export class Drivefunction {
   public injection: Injection;
...

Answer №2

Remember to define your drivefunction attributes as an array. You can achieve this by using the code snippet below:

public drivefunction: Array<Drivefunction> = new Array();

By following these steps, you should be able to see the desired outcome. Good luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered a surprising issue in JSON parsing with React Native - Unexpected character 'U' at

I encountered an error while retrieving data from an API for my application. Despite successfully obtaining the token, an unexpected error still occurred, even after using AsyncStorage.clear() at the beginning of the app. useEffect(() => { AsyncStor ...

Get all instances of a particular attribute value within an interface

In my TypeScript code, I have defined an interface and two constants: interface Foo { readonly name: string; }; const FOO_1: Foo = { name: 'zing' }; const FOO_2: Foo = { name: 'baz' }; Is there a way to find all instances ...

How come my Collectionview cells are disappearing when I switch to another view controller in my Swift project?

I have successfully implemented JSON parsing and adding cells in a CollectionView. However, when I navigate away from this ViewController and then come back to it, the CollectionView does not display properly even though the data is being added in the JSON ...

Using relative URLs in Angular 2 CSS

Struggling in Angular 2 to set a background image for a division using a .css file in the component, but encountering errors due to relative paths. test.component.html <div class="release-bg"></div> test.component.css .release-bg{ b ...

Is there a way to prevent this React function from continually re-rendering?

I recently created a small project on Codesandbox using React. The project involves a spaceship that should move around the screen based on arrow key inputs. I have implemented a function that detects key presses, specifically arrow keys, and updates the ...

Making a GET request to retrieve an object within the request body using HTTP

Could someone assist me with sending a Center object in the body of a Get request and receiving a WorkFlowDC object in return? I'm unsure about how to write the method in the service file. If there's anyone who can help me solve this issue, I w ...

An issue with event listeners in Vue 3 and Pixi.js arises when working with DisplayObjects that are either created as properties of classes or inherited from parent classes

Utilizing PIXI js in conjunction with Vue 3 (see code snippet below) Due to the consistent pattern of most graphics with varying behaviors and properties, we opted for an OOP approach with TypeScript to prevent code duplication. However, following this app ...

What is the best way to design my PDF with a complete background?

When it comes to creating a pdf with custom styling using CSS, I'm encountering an issue where the background-color doesn't display as expected. Despite my efforts, I can't seem to achieve a full background effect. Here's the CSS code ...

Issue found in VS2015 with the sequence of AngularJS TypeScript ts files within the appBundle.js file

I've been diving into AngularJS and TypeScript with the VS2015 RC Cordova TypeScript project. Recently, I created a "MyController.ts" file in the same folder as "index.ts". The code worked perfectly fine: module MyTestApp{ export class MyContro ...

Dependencies between Angular (Ionic) Services and Models

Someone advised me that for an Ionic project, it is necessary to use a service for each object. Here are my models: export class Document{ idDocument: number; listFields: Fields[]; } export class Field{ idParentDocument: number; idLinkToO ...

Utilize the Google reverse geocoding API to convert latitude and longitude values from JSON into a dynamic variable

I have been utilizing the NPM Geocoder to convert locations into latitude and longitude coordinates, but I am struggling with extracting the lat and long values from the output. Below is the JSON data, and my goal is to store the values on lines 59 and 60 ...

Understanding JSON in MySQL version 5.5

Is it possible to parse a JSON string stored in a MySQL table and retrieve the value using a stored procedure? Can MySQL 5.5 handle this task? I stumbled upon a user-defined function (UDF) called https://github.com/ChrisCinelli/mysql_json, but I am unabl ...

The jasmine toEqual function is not functioning as expected when comparing Header objects

The function toEqual is causing unexpected behavior when attempting to test a Header object. To better understand the issue, consider the following example: const foo = new Headers(); const bar = new Headers(); bar.append('some', 'valu ...

The JSON string is having trouble parsing the header section of the string

Json string : { "event": { "event_name": "Customer Phone Number", "operation_type": "Add", "transaction_identifier": "1234567890", "event_publication_timestamp_millis": "1518464452915", "event_publisher": "CIS", ...

Programmatically populating PrimeNG TreeTable with children

I am looking to dynamically add child nodes to a TreeTable. Adding parent nodes is not an issue, like so: var parentNode: TreeNode = { data: { 'col1': 'aaa', 'col2': 'aaa', }}; this.treeTableM ...

The result of chaining methods is a generic object return type

My goal is to achieve the following: let result = loader .add<number>(1) .add<string>("hello") .add<boolean>(true) .run(); I am seeking a method to create the hypothetical loader object in a way that automatically deter ...

Tips for implementing a double loop on a JSON result

Here is the JSON result I'm working with: https://i.sstatic.net/ih4CH.jpg I am able to loop through the first level of the JSON data, but I am having trouble looping through the second level (SUBCATEGORIA). <ScrollView> {this.state.item ...

Is it possible to retrieve a key based on its corresponding value in a Python dictionary?

It's a bit strange because dictionaries are typically used for key-value pairs rather than just values. I recently encountered a problem where I needed to streamline the form fill-up process by auto-populating the country and continent based on certai ...

Identify alterations in the elements of the provided array

Currently, I am facing an issue with detecting changes in Angular component Input variables. The specific variable I am dealing with is an array of objects where I need to pinpoint which object is changing and which property within that object is being mod ...

Tips for programmatically appending a property to a JSON response (no access to API settings)

UPDATED (SOLVED): In order to modify the objects, I simply had to return { ...post, companyName: updatedCompanyName } Hopefully this explanation will benefit others who are unfamiliar with mutating a JSON API object before storing it ...