The property of the Angular Typescript object is distinctly not defined, yet the property itself is

Currently facing a bizarre issue.

Even though the console displays data in an object from a subscribed observable, TypeScript code shows it as undefined.

Take a look:

initData(): void {

    this.backendService.getData().subscribe((depotDays: DepotDayAcc[]) => {

      console.log(depotDays)
      console.log(depotDays[0])
      console.log(depotDays[0].investment)
      console.log(depotDays[0]["day"])

      console.log('depotDays[0] == undefined', depotDays[0] == undefined)
      console.log('depotDays[0].investment == undefined', depotDays[0].investment == undefined)
    })
}

constructor(
    public day: Date,
    public investment: number = -1,
    public profit: number = 0,
    public value: number = 0,
    public percent: number = 0,
    public tickers: Set<string> = new Set<string>()) {
}

Answer №1

ShamPooSham mentioned in a previous comment that your data consists entirely of strings. It appears you are working with an array of strings, not objects.

const firstDay = JSON.parse(days[0]);
console.log(firstDay.investment);

You have two options: fix the payload so it can be deserialized correctly, or manually deserialize each entry.

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

Understanding the timing of records being returned via an Observable in Angular's ngOnInit

In my Angular 2 application, I am using an observable to keep track of an array of records. As the results of this observable are stored in the variable "records", I am utilizing *ngFor="let record of records" to iterate over and display them in my view. ...

Leverage predefined JavaScript functions within an Angular template

I have been attempting to execute an eval function within my angular template in the following manner: <div *ngFor="..."> <div *ngIf="eval('...')"></div> </div> You understand what I'm trying to ...

Creating a dual style name within a single component using Styled Components

Need assistance with implementing this code using styled components or CSS for transitions. The code from style.css: .slide { opacity: 0; transition-duration: 1s ease; } .slide.active { opacity: 1; transition-duration: 1s; transform: scale(1.08 ...

Who is responsible for ensuring that the data has been successfully stored in the state?

As I work on utilizing SSR with TransferState, a question arises about the assurance of data storage in the transferState. This concern stems from the asynchronous nature of http.get, which may result in content delivery to the client before the desired ...

Issue encountered while developing custom Vuejs + Typescript plugin

In my index.ts and service plugin files, I have this structure: service.ts declare interface Params { title: string; description?: string; type?: string; duration?: number; } export default class ServiceToast { public toastRef: any; // componen ...

Adding query parameters to links in Angular 10: A beginner's guide

I'm trying to update a link: <a class="contact-email" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117268737463656364727a51666370617c7065743f727e7c">[email protected]</a>" ...

How can I configure Material-UI's textfield to return a numerical value instead of a string when the type is set to "number"?

Utilizing Material-UI's TextField alongside react-hook-form to monitor inputs has raised an issue for me. I have observed that regardless of the input type, it always returns a string. This creates conflicts with the data types I am using in my codeba ...

Implement new functionalities within JDL Jhipster for an Angular project

For instance, I am interested in incorporating functions such as onChange, focusout, onBlur, onClick while passing an extra parameter in jdl like this: <input type="text" class="form-control" name="firstName" (onChange)= ...

Is Webpack CLI causing issues when trying to run it on a .ts file without giving any error

I am facing an issue with my webpack.config.js file that has a default entrypoint specified. Here is the snippet of the configuration: module.exports = { entry: { main: path.resolve('./src/main.ts'), }, module: { rules: [ { ...

Transforming an array of elements into an object holding those elements

I really want to accomplish something similar to this: type Bar = { title: string; data: any; } const myBars: Bar[] = [ { title: "goodbye", data: 2, }, { title: "universe", data: "foo" } ]; funct ...

The issue of Rxjs Subject in Angular2 running twice persists even after unsubscribing

Currently, I am developing a desktop application using angular2 and electron with a download feature integrated within it. The code for my DownloadService looks like this: import {Injectable} from '@angular/core'; import {Subject} from "rxjs"; ...

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

How can I handle a queue in Angular and rxjs by removing elements efficiently?

I'm facing a challenging issue with my code that I need help explaining. The problem lies in the fact that a function is frequently called, which returns an observable, but this function takes some time to complete. The function send() is what gets c ...

Using :global() and custom data attributes to apply styles to dynamically added classes

Currently, I am working on creating a typing game that is reminiscent of monkeytype.com. In this game, every letter is linked to classes that change dynamically from an empty string to either 'correct' or 'incorrect', depending on wheth ...

Using Angular 4 to import an HTML file

I am trying to save test.svg in a component variable 'a' or svgicon.component.html. To achieve this, I have created the svgicon.component.ts file. However, it's not working. What steps should I take next? svgicon.component.ts import ...

Chai expect() in Typescript to Validate a Specific Type

I've searched through previous posts for an answer, but haven't come across one yet. Here is my query: Currently, I am attempting to test the returned type of a property value in an Object instance using Chai's expect() method in Typescript ...

Control or restrict attention towards a particular shape

Greetings! I am seeking guidance on how to manage or block focus within a specific section of a form. Within the #sliderContainer, there are 4 forms. When one form is validated, we transition to the next form. <div #sliderContainer class="relativ ...

Having trouble reading properties of undefined (specifically 'listen') during testing with Jest, Supertest, Express, Typescript

Issue: While running jest and supertest, I encounter an error before it even gets to the tests I have defined. The server works fine when using the start script, and the app is clearly defined. However, when running the test script, the app becomes undefi ...

Is there a way to activate Apache Proxy Cache for error status responses such as 403 or 404?

We have successfully implemented Apache Web Server (HTTPD) as a proxy for the Angular Universal (SSR) app. The caching functionality is working well when the Angular App responds with a status code of 200, as confirmed by the X-Cache: HIT from <url> ...

Dealing with errors in Next.js 13 with middleware: a comprehensive guide

My attempt to manage exceptions in Next.js 13 using middleware is not producing the desired results. Below is my current code: import { NextRequest, NextFetchEvent, NextResponse } from "next/server" export function middleware(req: NextRequest, e ...