Displaying varying values of an object using TypeScript's console log trick

While using Angular version 8 with RJXS library, I encountered a peculiar issue when attempting to log an object variable:

Object { carName: "Sorbonne", age: "20", type: "C1" }
​
carName: "BB"
​
age: "23"
​
type: "PROPA"
​
<prototype>: Object

To view it as an image, click here.

Below is the code snippet in question:

 this.carService.subscriptionUpdatingCarObservable.pipe(
      takeUntil(this.unsubscribe$))
      .subscribe((car: Car)   => {
        console.log(car)
     [...]
    });

I'm perplexed by the inconsistent values displayed in the console. Any insights on why this may be happening?

angulartypescriptrxjs

Answer №1

The reason for this issue is likely due to the manipulation of your car object in some part of your code. The Chrome console is intelligent enough not to simply convert your object into a string when you use console.log, but instead displays a reference to the object. By expanding the object, you can view the actual values stored within it.

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

Create a recursive CSS style for an angular template and its container

I am struggling with styling CSS inside an ng-container that is used in a tree recursive call to display a tree hierarchy. <ul> <ng-template #recursiveList let-list> <li *ngFor="let item of list" [selected]="isSelected"> <sp ...

cssangularrecursiontree

Tips for adjusting the size and positioning the ng bootstrap carousel in the center

My Angular project is using ng bootstrap, but I'm facing a styling issue. The content doesn't display in the center, rather it appears in the upper left corner: example I would like the content to be centered and wide under the blue headbar. W ...

cssangularbootstrap-5ng-bootstrap

Strategies for incorporating a JSON variable into the HttpClient query parameters in an Ionic 5 application

Currently using Ionic 5 and attempting to retrieve the IP address of the client user to include it in a URL. Here is my code: this.ipclient = this.httpClient.get("https://api.ipify.org/?format=json"); this.ipclient .subscribe(ipclient => { console.log( ...

jsonangularionic-frameworkionic4

Observing changes in a parent component variable with Angular

One feature of my form is that it consists of a parent component and a child component. To disable a button within the form, I utilize a function called isDatasetFilesValid() which checks a specific variable (datasetList[i].fileValid). This variable is mo ...

javascriptangulartypescriptcallback

Mapping properties between objects in Typescript: transferring data from one object to another

Here are two different types and an object: type TypeX = { x: number; y: number; z: number; }; type TypeY = { u: number; v: number; w: number; }; initialObject: { [key: string]: TypeX }; The goal is to transfer the properties from an object of ...

typescript

What is the process for importing the TokenExpiredError that is thrown by the verify function in jsonwebtoken?

Is there a way to determine if an Error object thrown by the jwt.verify function in the jsonwebtoken library is of type TokenExpiredError using Typescript's instanceof? For example: import jwt from "jsonwebtoken"; function someFunction() { try { ...

javascripttypescriptjwt

Duplicate routing configuration causing ngOnInit to be triggered twice

Here is my route setup: { path: 'menu/:level/:parent', component: MenuComponent, pathMatch : 'full' }, { path: 'menu', component: MenuComponent, }, I am trying to make it so that if the URL is menu/2/test, it will use ...

angular

What sets apart regular component styles from nested styles within the :host selector?

Here is an example of component-level styling for a component with the default view encapsulation value of ViewEncapsulation.Emulated: :host h2 { color: red; } When compiled, the CSS will look like this: [_nghost-c0] h2[_ngcontent-c0] { color: r ...

angularcss-selectorsangular6

loop failing to refresh element within array

Is there a way to update a specific property in every element of an array to match its index? I attempted the following approach: static reindexComponentsOnMultiplePages(components) { return components.forEach((el, idx) => (el.componentIndex = id ...

javascripttypescript

Dynamically loading classes in TypeScript without using default export

Is there a way to dynamically load classes in TypeScript without using a default export method? I have managed to make it work partly, but I am looking for a solution that doesn't require a default export: export default class Test extends Base { ... ...

typescript

Updating an array in a single line of code in Javascript can be achieved

Can the code below be optimized? const item: any; // New data const index: number = basketModel.data.coupons.findIndex( (x: any) => x.couponId === item.couponId ); if (index === -1) { // If new item, push it to array ...

node.jstypescriptecmascript-6

Navigating through child routes in Angular can be tricky, especially when dealing with unknown routes

I'm having some trouble with routing today. I have a collection of components each associated with a unique route. I am trying to include a 'PageNotFoundComponent' for any incorrect route in both the parent and child components. Let me expla ...

angularangular-routingapp-route

The Core.js file seems to be missing, but it can be found in the node modules directory. The Meteor client is functioning properly, but there seems to be

I encountered an issue while trying to import the meteor-client.js file. The problem arose when loading ecmascript-runtime-client, which prompted me with an error stating that the core-js npm package could not be found in my node_modules directory. Even af ...

angularionic-frameworkmeteornpm

When trying to generate a popOver in Ionic, an error message "<TypeError: ev.target.getBoundingClientRect is not a function>" may be displayed

I'm currently working on implementing a popover that appears when a mouse click event is triggered. However, I've encountered an issue where the Create() method of the popover gets called upon event activation, but I keep receiving the following ...

angularionic-frameworkpopover

Encountering issues with loading Angular formControl

I've been going through an Angular tutorial on forms, which you can check out here. In my 'datasources.component.html' file, I have the following code: <form [formGroup]="queryForm"> <label>Query: <input type="text" formCont ...

javascriptangular

The assets path is the directory within the installed package that houses the main application files following the completion of a

I have a Vue.js UI component that is internally built using webpack. This reusable UI component library references its images as shown below: <img src="./assets/logo.png"/> <img src="./assets/edit-icon.svg"/>   <i ...

javascriptnode.jstypescriptnpmwebpack

Angular control reset event allows you to reset form controls to their

I'm in the process of creating my own component and I need to implement a custom reset feature. This involves cleaning up certain labels and other elements. Whenever this.form.reset(); is called, I want my component to detect this event and perform s ...

angularangular2-forms

The rendering process in ag-grid is resulting in the service component initialized from an event to become null

Currently, I am utilizing ag-grid and need help understanding a specific issue. In my method for preparing GridOptions, I have set up an onCellValueChanged event that triggers a service component to access the database and populate the data. However, when ...

angulartypescriptag-grid

JavaScript - Trouble encountered while trying to use splice to insert one array into another array

I've been working on creating a Cache Hashtable using JavaScript. When I use the code cache.splice(0,0, ...dataPage);, it inserts my data starting from the first position up to the length of dataPage. Assuming that my dataPage size is always 10. Th ...

javascriptarraystypescript

What are the methods to alter validation for a Formfield based on the input from other Formfields?

My aim is to create a Form where input fields are required only if one or more of them are filled out. If none of the fields have been filled, then no field should be mandatory. I came across a suggestion on a website that recommended using "valueChanges" ...

javascriptangulartypescriptangular-reactive-formsangular-forms