In Angular 2, I am having trouble reaching the properties of an object nested inside another object

I have a variable named contact. When I used console.log(contact) to display its contents, this is what I got:

addresss:[]
company:""
emails:[]
id:3
internet_calls:[]
lat:"10.115730000000001"
lng:"76.461445"
name:"Diji  "
phones:[]
special_days:[]
timestamp:1508919658000
title:"Mr"
websites:[]
__proto__:Object

However, when I tried to check the length of the addresss field using 

console.log(contact.addresss.length)
, it returned undefined.

When I logged the object using 

console.log(JSON.stringify(contact))
, the result was:

{"id":3,"title":"Mr","name":"Diji  ","company":"","lat":"10.115730000000001","lng":"76.461445","timestamp":1508919658000,"phones":[],"emails":[]}

My question is, why are some properties of my object not displayed in the later log but appear in the first log?

angulartypescriptionic2

Answer №1

When you use console.log to log an object, the value displayed in the console may not be the same as at the time of the call. Instead, it shows the last value of the object by the time you view it. This discrepancy is due to passing objects as references.

If you log the JSON representation, you are essentially logging a simple string which is passed by value. As a result, you see the exact value that was present at the time of the function call.

This suggests that the addresss array was likely added later than expected. Additionally, it's worth noting that the correct spelling for address includes only two "s".

The same principle applies to other object fields such as internet_calls, special_days, and websites which are also absent from the JSON data.

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

Specifying the return type of a function as a combination of the types of the input arguments

Is there a way to safely implement the given function in TypeScript without using unsafe casts or an extensive number of function overloads with various input permutations? interface Wrapped<T> { type: string; data: T; } interface WrappedA&l ...

typescripttypescript-typingstypescript-generics

Multiple components are returned with switch case

I am trying to iterate over an object and display a result based on Object.entries. However, the loop currently stops at the first return statement. Is there a way for me to capture and display all components returned simultaneously, perhaps using a vari ...

javascriptreactjstypescript

There is an issue with the target entry-point "fullcalendar/angular" as it is missing some dependencies

My current project uses Ionic, but I'm encountering an error related to missing dependencies for "@fullcalendar/angular" when running ionic serve. Error: [ng] ERROR in The target entry-point "@fullcalendar/angular" has some missing dependencies ...

node.jsangularnpmfullcalendarangular9

Converting Angular 5 select option values to strings is a must

I have set up a basic select connected to a variable like this: <select id="client" name="client" [(ngModel)]="order.clientId"> <option *ngFor="let client of clients" [value]="client.id"> {{ client.name }} </option> </ ...

angulartypescriptangular-httpclient

How is it possible for passing a number instead of a string to not result in a compilation error?

Here is some code that has caught my attention. It involves passing a number to a function that expects a string. const getGreeting: Function = (name: String): String => { return `hello, ${name}`; }; const x: number = 2 console.log(getGreeting(x)) ...

typescript

What sets my project apart from the rest that makes TypeScript definition files unnecessary?

Utilizing .js libraries in my .ts project works seamlessly, with no issues arising. I have not utilized any *.d.ts files in my project at all. Could someone please explain how this functionality is achievable? ...

javascripttypescript

Unresolved peer dependencies in Angular 2

I recently set up an angular2 project using CLI, and my package.json file is structured as shown below: { "name": "thesis-proto", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve", ...

angular

What is the best way to remove all validators from a different component in Angular 7 using reactive forms?

I need to find a way to clear all validation in a form group on a sibling component when a boolean value is selected on another component within the same application. Is there a solution for achieving this? We have implemented a method in our application ...

angularvalidationangular7angular-reactive-formsformgroups

When you eliminate the Angular root element, what are the consequences that follow?

I am in the process of manually bootstrapping an Angular application. ngDoBootstrap(app) { app.bootstrap(AppComponent); } Each time the root element is removed from the DOM and re-injected, I bootstrap the application again. This cycle repeats multip ...

angular

Angular 2 does not recognize the existence of .then in type void

I have a query regarding Angular2 and I'm struggling with the void function in my code. Can someone help me out? I am new to Angular2 and unsure of what needs to be added in the void function. Check out this image for reference export class PasswordR ...

angulartypescript

Module Augmentation for extending Material UI theme is not functioning as expected

I'm having trouble expanding upon the Theme with Material UI because an error keeps popping up, indicating that I am not extending it correctly. The error message states: Property 'layout' is missing in type 'Palette' but required ...

javascriptreactjstypescriptmaterial-ui

Steps for importing a CommonJS module that exports as a callable into TypeScript

I am dealing with a project that has a mixture of JavaScript and TypeScript files. Within the project, there is a JS library that follows this structure: module.exports = () => { // logic dependent on environment variables // then... return { ...

typescriptcommonjs

Prevent IonContent from scrolling to the bottom or top when using Ionic framework

In my Ionic app, I have a long text page with 2 buttons that trigger the actions scrollToBottom and scrollToTop. Due to the length of the page, I have set the scroll duration to be 30 seconds. I am facing two issues here: How can I stop the scrolling ...

javascriptcssangularionic-framework

The IntrinsicAttributes type does not include the property 'path' in the Preact router

I am facing a challenge while developing my website using preact router. Every time I try to add something to the router, I encounter an error stating "Property 'path' does not exist on type 'IntrinsicAttributes'." Despite this error, t ...

typescriptpreactpreact-router

The PrimeNG pie chart will sporadically appear and adjust its display when the resolution changes

I recently encountered an issue with a primeng pie chart that I am using, which pulls dynamic data from the back-end. Previously, when using static data, the pie chart functioned perfectly. However, after integrating dynamic data, the chart now seems to di ...

angularchartschart.jsprimeng

Utilize *ngIf to conceal a row within a material table

I'm struggling with hiding a row after clicking a button in the mat-table. I can't figure out where to place the *ngIf directive. I attempted using it on ng-container, but it didn't work as expected. Below is the excerpt from my HTML file. ...

angularmat-table

Exploring the nativeElement property of a customized Angular HTML element

In my Angular Jasmine Unit Test, I am testing a third-party slider component in my application using the following code snippet: Here is the HTML: <ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch> And her ...

javascriptangularunit-testingtypescriptjasmine

Unlocking the secret to accessing keys from an unidentified data type in TypeScript

The code snippet above will not compile due to an error with the email protection link. const foo: unknown = {bar: 'baz'} if (foo && typeof foo === 'object' && 'bar' in foo) { console.log(foo.bar) } An erro ...

typescriptstructural-typing

Error: The AppModule encountered a NullInjectorError with resolve in a R3InjectorError

I encountered a strange error in my Angular project that seems to be related to the App Module. The error message does not provide a specific location in the code where it occurred. The exact error is as follows: ERROR Error: Uncaught (in promise): NullInj ...

angulartypescript

Angular 5 - Performing Jasmine Testing: Simulating an Error Response on a Genuine HTTP Request

Before I start, I'd like to mention that I am currently in the process of learning Angular 4 as part of an internship. This is all very new to me. Anyway, I have a requirement where I need to simulate an error during an HTTP request in the controller ...

angularunit-testingjasminehttpresponsehttp-error