The Typescript object property is deemed as 'undefined' even though it has not been defined

I'm relatively new to working with Typescript and I'm facing a challenge that seems quite silly:

When I fetch an 'agent' object from a service.

this.agentsController.getAgent(matricule).subscribe({
      next: agent => {
        console.log(agent)
        console.log(agent.emailPro)
      },
      error: (error: string) => {
        console.log(error)
      }
    });

Based on the first console.log, the object is properly populated :

{
    "agent": {
        "matricule": "000001",
        "nom": "DummyName",
        "prenom": "DummyFirstname",
        "emailPro": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c38293131251c3829313125723a2e">[email protected]</a>",
        "adresse1": "dummy address",
        "telephonePerso": "0000000001"
    }
}

Despite having a clearly defined email address in the agent printout (emailPro), the second console.log always displays undefined

How does this happen? What am I overlooking?

angularjstypescriptundefined

Answer №1

Summarizing the conversation as a valid response :

In my service, I mistakenly wrapped my actual agent object in another object also named 'agent'. This caused confusion!

Instead of using agent.EmailPro, I should have used agent.agent.EmailPro.

I decided to correct my service so it handles the API response properly:

Changed from 

this.httpClient.get('apiUrl').pipe(map((result:any) => result as Agent));

To 

this.httpClient.get('apiUrl').pipe(map((result:any) => result.agent as Agent));

A big thank you to @pietro909 & @T.J.Crowder

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

Retrieving the $scope data from within an http.get callback

Would someone be able to assist me with storing the data returned by the $http.get function in a $scope variable for use in my ui-grid control? I have tried the code below but seem to be missing something simple. I just can't figure out what it is: ...

javascriptangularjs

Custom fields provided by Express are not accessible within routes

In my customExpress.d.ts file, I have defined an extended type: declare namespace Express { export interface Request { user: { id: string; }; } } I have also configured it in the tsconfig.json file: ... "typeRoots": ["sr ...

node.jstypescriptexpress

Changing the HTML Structure of the md-datepicker Component

I am currently utilizing the md-datepicker component on my webpage. I have a specific need to include a CSS class to the produced input element. Is there a method to alter the markup that is generated by md-datepicker? <md-content> & ...

angularjsangularjs-material

AngularJS xeditable typeahead - dynamically modify input field based on the value of another input field

Struggling with the angularjs xeditable typeahead feature. I attempted to update one input field using the value of another input field, but encountered an issue. Even after updating the $scope variable, xeditable failed to bind the new value to the HTML ...

angularjstypeaheadx-editable

Tips for sending a variable to control a particular panel within an accordion in Angular 2

I have a collection of ngbpanels that are dynamically created using ngFor. I need to expand or collapse a specific panel based on certain conditions, but the ID I provide for the panel is stored in a variable. The code does not recognize the panel ID when ...

javascriptangulartypescript

There is an excessive number of import statements on the homepage during the initialization of the framework

For my angular project, I initially planned to organize each page and service in separate .js files. However, as I started coding, I realized that my index.html file was becoming overloaded with import statements. This could potentially slow down user load ...

angularjs

Ways to ensure the final unchecked checkbox stays in the checked state

I currently have a set of checkboxes that are pre-selected. However, I would like to ensure that if all checkboxes except one are unchecked, and an attempt is made to uncheck that final checked checkbox, an error message will appear and the checkbox will n ...

javascripthtmlangularjscheckbox

When using Typescript, I am encountering an issue where declared modules in my declaration file, specifically those with the file

One of the declarations in my ./src/types.d.ts file includes various modules: /// <reference types="@emotion/react/types/css-prop" /> import '@emotion/react'; import { PureComponent, SVGProps } from 'react'; declare mod ...

typescripttsconfig

Exploring the behavior of control flow in Typescript

I am a beginner when it comes to JS, TS, and Angular, and I have encountered an issue with an Angular component that I am working on: export class AdminProductsMenuComponent implements OnInit{ constructor(private productService: ProductService, ...

javascriptangulartypescript

Implement a function in a prototype that can be accessed globally, regardless of the module it is contained in

Trying to extend the functionality of the Array prototype in Typescript (1.8) through a module. The modification to the prototype is being made in utils.ts file: declare global { interface Array<T> { remove(obj: any): void; } } Arr ...

javascripttypescriptmoduletypescript1.8

Troubleshooting incorrect data display in AngularJS using ng-repeat

Being a newbie in the world of JavaScript, AngularJS, and Parse, I am eager to learn. If there are any mistakes in my approach, please do point them out as I aim to gain as much knowledge as possible. I have been given an assignment that requires me to ut ...

javascriptangularjs

Issue with TypeScript function overloading: Visitor Pattern not working as expected

I've been working on implementing a Visitor Design pattern, but I keep running into a compilation error that I just can't seem to resolve no matter how many hours I spend trying to find a solution... Here's my Visitor interface: export inte ...

typescriptinterfaceoverloadingvisitor-pattern

I possess both a minimum and maximum number; how can I effectively create an array containing n random numbers within

Given a minimum number of 10.5 and a maximum number of 29.75, the task is to generate an array within these two ranges with a specific length denoted by 'n'. While the function for generating the array is provided below, it is important to calcul ...

javascriptnode.jstypescript

The Zoom-sdk functions properly on a local machine, but encounters issues when it is

Using zoom's API, jwt, and the websdk, I am able to create a meeting on button click, join as a host, and start the meeting for others to join. This process works flawlessly when running locally, but once deployed to Cloudflare, I encounter the follow ...

javascripttypescriptzoom-sdk

create a PDF document that contains interactive input fields which can be modified using Angular

My goal is to generate an editable PDF using JavaScript and AngularJS, allowing users to input data into text fields on the document. However, when I download the PDF, the text fields are not editable. Here is a snippet of the code: var opt = { margin ...

javascriptangularjspdfhtml2pdf

A guide on retrieving the values of all child elements within an HTML element using Puppeteer

I have been exploring the capabilities of puppeteer and am trying to extract the values from the column names of a table. <tbody> <tr class="GridHeader" align="center" style="background-color:Black;"> <td cl ...

javascripttypescriptpuppeteer

Is there a way for me to track the actions of AngularJS when I interact with a link?

Within my application, there is a basic link that directs to an absolute page with its target set to blank. However, when I click on this link, the new page opens in a new window but my application screen goes blank. I am currently using Angular and tryi ...

angularjs

Troubleshooting AngularJS $stateProvider and the singleton service conflict

I am currently using angular-ui-router to manage the routing in my app, however I am a bit confused. It is known that 'ui-router' dependency must be added to the module in order to utilize $stateProvider. Surprisingly, even without adding the &ap ...

angularjsangular-ui-routerangular-services

Deciphering the Components of Web Applications: Express.js, Angular.js, and the MVC Puzzle

After exploring numerous discussions on Stack Overflow regarding the integration of Express.js with Angular.js and the presence of dual MVC components in both the client and server sides of web applications, I have found myself feeling somewhat perplexed. ...

javascriptnode.jsangularjsmodel-view-controllerexpress

When using TypeScript in React Native, the error "TypeError: this.setState is not a function

While working with React Native version 0.39.2 along with the latest TypeScript, I encountered an error when running my componentDidMount() method and trying to setState. The error message indicated that this.setState is not a function. I attempted bindin ...

reactjstypescriptreact-nativetypescript2.0