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

Trouble with using the date pipe in Angular specifically for the KHMER language

<span>{{ value | date: 'E, dd/MM/yyyy':undefined:languageCode }}</span> I am facing a challenge where I need to identify the specific locale code for the KHMER language used in Cambodia. Despite trying various cod ...

javascriptangulartypescriptlocalizationdate-pipe

Request for /Account after Keycloak token request in Angular app

I have been working on an Angular and Keycloak project. I followed a tutorial that helped me integrate Keycloak into Angular, which can be found here: https://www.npmjs.com/package/keycloak-angular My public client is able to request a token, but when it ...

angularkeycloak

The error message "TranslateService not found" seems to be linked to the npm installation process

Encountering an issue with my Angular+Webpack+JHipster+yarn project where a particular error keeps reappearing despite deleting `node_modules` and running 'npm install`. The error seems to be related to the TranslateService provided by a library, not ...

angularnpmwebpackjhipsteryarnpkg

Ways to include x-api-key in Angular API request headers

I am attempting to include the x-api-key header in the headers, as shown below: service.ts import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import { Observable } from ...

javascriptangular

Is there a way to determine if silent login is feasible with adaljs-angular4?

I'm currently utilizing the library [email protected] for an Angular 6 project. I am attempting to achieve the following: If a silent login (login without requiring user input) with Office365 is achievable, then perform a silent login (using ...

angulartypescriptazure-active-directoryadal.jsmicrosoft-adal-angular6

Could someone please clarify whether environment variables are suitable for my specific situation?

As I explore the functionality of environment variables in a production setting following deployment, I find myself curious about how they operate. Operating frontend and backend applications on the same server behind a VLAN can present challenges when sp ...

node.jsangularenvironment-variables

The function to increase the number of days on a date in Angular is experiencing technical issues

I'm facing an issue where I need to add 12 days to a specific date, but the new date is not coming out as expected. Below is the code snippet: addDays(days: number): any { let startDate = new Date(this.selectedDeliveryDate); let endDate = new ...

angulartypescriptdate

Using the <head> or <script> tag within my custom AngularJS2 component in ng2

When I first initiate index.html in AngularJS2, the structure looks something like this: <!doctype html> <html> <head> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scal ...

typescriptangular

Using Node.js: Only bring in the necessary function, don't execute the entire file

Today, I stumbled upon an interesting observation and I'm curious about the peculiar behavior of node in this scenario. I have two files structured as follows: src/api/index-api.ts src/worker/index-worker.ts Both of these files contain a simple con ...

node.jstypescript

Angular is not able to access the value of a promise in a different function after it has been retrieved

I have a form with default values that should be added to the form fields when it appears. There are two functions: #1 for fetching data from the backend and #2 for displaying the form: person$: any; ngOnInit() { this.getPersonData(123) this.buildPer ...

angulartypescript

When importing an Angular 9 library, the error message "The value at index 4 within MyCommonLibraryModule's NgModule.imports is not a valid reference" is displayed

Having two Angular projects that share a common code base through an Angular library, I decided to upgrade them from version 8 to 9 using the ng update command. However, after running the migration scripts, I noticed changes in the tsconfig.app.json file: ...

angulartypescriptangular-cliangular9

Encountering an issue with resolving parameters for the DecimalPipe in ngBootstrap/Angular2

Just delving into the world of Angular2 and trying to learn through hands-on experience. However, I've hit a roadblock! I attempted to import ng-bootstrap and encountered this error: https://i.stack.imgur.com/QDVJ3.png Here's my systemjs.config ...

angularng-bootstrap

Encountering an issue with Angular Flex Layout after including the layout module

Upon adding FlexLayoutModule to the imports section of my app.module.ts, I encountered the following error: ERROR: The target entry-point "@angular/flex-layout" is missing dependencies: - @angular/core - @angular/common - rxjs - @angular/pla ...

angularangular-flex-layout

Angular design pattern: organizing rows according to the month

I currently possess the following items: { "pk": 33, "name": "EVENT 634", "start_date": "2022-05-11T00:00:00", "end_date": "2022-05-14T00:00:00" }, { "pk": ...

angular

What are the Dependencies for an Angular 2 package.json file?

I am embarking on Angular2 development for the first time. Upon researching various examples online, I have noticed a discrepancy in the package.json file under the "dependencies" section. "@angular/common": "2.0.0-rc.1", "@angular/core": "2.0.0-rc.1", S ...

angularnpmpackage.json

Is it advisable to switch all properties to Angular Signals?

Recently, I've been utilizing signals to replace certain properties in my components that would typically require computed logic or be reactive to the effect hook. It got me thinking - should I be replacing all of my properties with signals, even if t ...

angulartypescriptangular-signals

What is the best way to update the value of an input in a child component?

I have two files named person-input.ts and person-input.html What I want to achieve is that when inside the AddPerson function in person-input.ts, I would like to dynamically modify the name-input component by setting [focused]="true" So, the code needs ...

angular

When receiveMessage is triggered, the FCM push notification fails to refresh the view

After following this helpful tutorial on Push Notifications with Angular 6 + Firebase Cloud Messaging, everything is working perfectly. I am able to receive notifications when using another browser. To ensure that my notification list and the length of no ...

javascriptangulartypescriptfirebasefirebase-cloud-messaging

Using Redux and Typescript to manage user authentication states can help streamline the process of checking whether a user is logged in or out without the need for repetitive checks in the mapStateToProps function

In the process of developing a web application utilizing React & Redux, I am faced with defining two primary "states" - Logged In and Logged Out. To tackle this challenge, I have structured my approach incorporating a union type State = LoggedIn | LoggedO ...

reactjstypescriptreduxstore

Incorrect Node.js version identified

I have been facing a challenge trying to integrate my projects developed with Spring and Angular using Maven. The issue arises with the Node.js version: [ERROR] Node.js version v8.11.3 detected. [ERROR] The Angular CLI requires a minimum Node.js version of ...

javanode.jsangularspringubuntu