Angularjs 2 Error: Unable to access the 'infos' property of an undefined object using the Http Client

I've been working on an AngularJS app for about a week now, developing a backoffice application for my service.

My main challenge lies in using data retrieved from a remote server. I have 4 HTTP GET requests in my app - 2 of them fetching lists of users and orders, which work as expected. However, the other 2 requests aimed at fetching user details and order details are throwing the same error.

The error message related to user details can be viewed here.

This is the component (user-details.component.ts):

(Component code here)

Below is the service file (user-details.service.ts):

(Service code here)

And here's the model structure (user-details.model.ts):

(Model contents here)

Snippet from the template file where the data from the server is utilized (user-details.template.ts):

(Template snippet here)

Lastly, this is the JSON response received from the API call:

(JSON response here)

I appreciate your time in reviewing this issue, and I look forward to any guidance you can provide to help me identify what might be going wrong.

EDIT: I have made an update by adding a directive "*ngIf="userDetailsModel" within the main wrapping the template, which resolved the issue. It turns out that the template was trying to access object properties before the HTTP request completed fetching the data.

javascriptangularjsjsonresttypescript

Answer №1

It seems like you are defining the variable userDetailsModel as an array of type UserDetails:

userDetailsModel: UserDetails[];

If this is the case, make sure to provide an index when accessing its properties.

userDetailsModel[x].propertyName

Alternatively, if userDetailsModel should be an instance of UserDetailsModel:

userDetailsModel: UserDetaislModel

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

Refusing to include two values due to the presence of a comma in JavaScript

I'm trying to add two values with commas and .00 (Example: 1,200.23 + 2,500.44) but it's not working because the textbox includes commas as required by my system. The result shows NaN because the comma is considered a special character. It was w ...

javascriptphpcsshtmlcodeigniter

Using PHP's include/require method with a dynamic path

Looking for assistance with my issue! Ajax is returning the correct information and displaying it in an 'alert(html)' on 'success'. The PHP code echoes $idName and $path correctly on the carrier page where the code resides. There are no ...

javascriptphphtml

Issue arises when fastify/websocket is being used and an argument of type '{ websocket: boolean; }' is not compatible or able to be assigned to a parameter

I am facing an issue with my new project that involves fastify and Typescript. The error I am encountering is as follows: Argument of type '{ websocket: boolean; }' is not assignable to parameter of type 'RouteShorthandOptions ...ts(2345) B ...

node.jsreactjstypescriptwebsocketfastify

What is the procedure to incorporate login credentials into the source of an iframe?

Is there a way to pass user auto login in the src URL? <iframe src="https://secure.aws.XXX.com/app/share/28228b0ccf0a987" width="1060px" height="1100px"></iframe> I attempted to achieve this, but it still shows the login screen <ifr ...

javascriptphpwordpressiframeautologin

What is causing my config file to streamline when saved in Windows Terminal?

I'm trying to make changes to the JSON configuration file of Windows Terminal: https://i.stack.imgur.com/CSAMc.png After saving, the document gets minified: https://i.stack.imgur.com/zC0cN.png Despite having removed other extensions and restarted ...

jsonvisual-studio-codewindows-terminal

How can I dynamically update a React/Next.js page as the server completes different stages of a complex action?

Currently, my aim is to develop a single-page application that relies on one major back-end process. This procedure is initiated by a singular string input. The various stages involved and the outcomes are as follows: It takes about 20ms to display/render ...

javascriptreactjsnext.jsserver-action

How do I resolve validation function error messages in Vuetify?

When utilizing validation methods in Vuetify, I encountered the following error message↓ I simply want to create a form validation check and implement a function that triggers the validation when the 'submit' button is clicked. I believe my i ...

typescriptvue.jsvuetify.jsnuxt.js

Altered JSON data

I have a function that retrieves a list from my database table. Here is the code snippet: public List<Album> GetAlbums() { List<Album> Albums = new List<Album>(); using (SqlConnection con = new ...

c#json

Selecting Objects with a Mouse in Three.js

Thanks to the wonderful support from the stackoverflow community, I was able to successfully implement a basic object picking example. You can view the functional code here. However, it's important to note that this example specifically works when t ...

javascriptthree.js

Guide to transmitting a "token" to an "API" using "React"

As a novice developer, I am facing a challenge. When users log in to our website, a JWT is created. I need to then pass this token to the API on button click. If the backend call is successful, the API response should be displayed. If not, it should show ...

javascriptreactjstypescriptmaterial-uinext.js

Converting Text in a Non-Json Format to JSON Format

My current dilemma involves a string that is 'almost' a JSON string, except for the fact that its keys are not enclosed in quotes. While this format is perfectly fine for UI and JavaScript usage, JAVA JSON parsers seem to require keys to be surro ...

javaregexjson

Unraveling a discriminated union

I'm currently working on writing code that can handle generic discriminated unions with a type property. Imagine I have multiple discriminated unions defined as follows: interface IFoo { type: "foo"; foo: number; } interface IBar { type: "bar ...

typescript

React Checkbox malfunctioning: Troubleshooting and solutions

I have thoroughly researched for a solution to my issue before resorting to posting this question. Unfortunately, none of the answers I found seemed to resolve my problem. Despite trying various methods such as changing, clicking, and checking, my checkbo ...

javascriptreactjs

What is the best way to extract data from a basic JSON response using a fetch request

I am encountering an issue with a simple JSON object in my fetch response. When I attempt to access it, the code gets caught in the catch block. this is my response { "islogin": true } fetch(url, data) .then(res => {console.log(res);retur ...

jsonreactjsfetch

Update the input value with the selected option from the dropdown menu in Angular

How can I dynamically set the value of an input field based on the selection from a dropdown menu in Angular using Reactive Forms? Below is my HTML code: <nb-card> <nb-card-header> Services </nb-card-header> <nb-card-body&g ...

angulartypescriptformgroups

Code that changes every occurrence of a particular filtered selection of HREF values to a different value

When faced with the limitation in Firefox where links cannot be opened in a new tab if they have a HREF tag diverting to a function, it might be necessary to utilize a script to convert them to an actual HREF. Understanding the functionality of foo: func ...

javascripthtmlhrefgreasemonkey

What is the best way to create varying DOM elements in Angular according to JSON attributes?

In order to enhance user experience, my application includes a feature that presents release notes to users whenever a new version of the app is deployed. These release notes are stored in JSON format in the backend, structured as follows: { "version" ...

jsonangular

Place the new item right under the chosen items within the nested list

My nested list with a collapse feature is almost complete. However, I am encountering an issue where I need to add content just below the selected item when I click on the "add" button. For example, in the attached demo, there is a nested list. If I select ...

javascriptreactjs

Ways to sort through an array to find distinct values and sum up the repeated ones in PHP

The data is sourced from an API, so I have no control over it. Before obtaining this result, I used json_decode($response, true) - Array ( [0] => Array ( [status] => ok [res] => Array ...

phparraysjsonobject

Comparing NodeIntegration, Preload Script, and IPC in Electron Framework

After thoroughly going through Electron's explanations on context isolation, IPC, and security, as well as delving into discussions like this thread about nodeIntegration and this post regarding preload.js, it's clear that there are various appro ...

javascriptnode.jsnpmelectronipc