Obtaining an array of objects filled with values, but encountering issues when attempting to access them resulting in undefined values

I'm encountering an issue with an array of objects that appear as non-null in debug mode, but are showing up as undefined when trying to access them. Here's a more detailed explanation:

Here's the code snippet:

export interface ICollectPoint {
  name: string,
  shortName: string,
  street: string,
  buildingNumber: string,
  apartmentNumber: string,
  zipCode: string,
  city: string
}

collectPoints: ICollectPoint[] = [];

this.collectPoints = [...this.logisticMethod.collectPoints]; // [{...}, {...}, {...}] - array with some objects - ICollectPoint { name, shortname }
const a = this.collectPoints[0].name

a = undefined

Can anyone offer assistance with this problem?

EDIT:

The code is within a component using changeDetection: ChangeDetectionStrategy.OnPush and I'm initializing this on ngOnInit()

Answer №1

Just wanted to express my gratitude to @MikeOne for guiding me in the right direction to resolve this issue. The problem actually lied on the WebApi side - where the [JsonProperty] on CollectPointDTO had all properties listed with capital letters such as "Name" and "ShortName", causing mapping issues in Angular on interface properties...

Interestingly enough, during debugging I was able to see those values properly mapped... I hope this explanation proves to be beneficial for others facing similar challenges.

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

Accessing JSON object with Javascript

I've been struggling with this code snippet and despite looking at similar posts, I can't seem to get it right. var obj2 = JSON.parse('{"venue_data": {"venue_id":"25", "description":"Space Cafe", "venue_type ...

Restricting union types by a specific property

I'm facing an issue when attempting to narrow down a type based on a property. To explain it better, here's a simplified version in code: type User = { id: number; name: string; } type CreateUser = { name?: string; } const user: User | Cr ...

Smarty 2: Accessing an array using a string as the key

My challenge lies in working with an array called {$man_data}, which has the following structure: 10 > 'Text 8' 14 > 'Text 12' 24 > 'Text 13' The value of {$entry.client_id} is an integer (either 10, 14, or 24). How ...

What are the methods for distributing a variable in AutoHotkey?

When working in JavaScript, we often utilize the spread operator to spread an array of items, like so: const arr = [1, 2, 3] console.log(...arr) // 1 2 3 Now, in AHK, I am trying to achieve a similar effect: Position := [A_ScreenWidth / 2, A_ScreenHeight ...

Is there a way to calculate the number of days between two dates that are stored in an array

I need assistance with extracting individual days from an array containing start and end dates. My goal is to store the days between the given dates in a new array. Array ( [0] => Array ( [start] => 2019-02-16 [end] => 2019-02 ...

Guide on combining two arrays to create a fresh array and setting its initial values in accordance with the original arrays

As a newcomer to Java, I am seeking guidance on how to formulate the appropriate question. I have a total of 40 items categorized into 6 different types that need to be arranged in a new array, each type with its own unique cost structure. The first item ( ...

What is the best approach for arranging numbers in descending order?

I'm struggling to sort numbers from largest to smallest and need some help. My code successfully sorted numbers with 5 digits, but not the others. Here is a snippet of the unsorted numbers: 15366 13070 13069 13068 13067 13 ...

Ignoring case in an array in Lua

I am working on coding an addon for World of Warcraft using lua. The addon is a chat filter that targets specific words. I am having trouble figuring out how to make the array of words case insensitive, so that any combination of upper and lower case let ...

Exploring the power of NestJS integration with Mongoose and GridFS

I am exploring the functionality of using mongoose with NestJs. Currently, I am leveraging the package @nestjs/mongoose as outlined in the informative documentation. So far, it has been functioning properly when working with standard models. However, my p ...

The error message "this.startLoginAnimatioon is not defined as a function" popped up

I've been developing a login system using TypeScript but I keep encountering an error that I can't figure out. Here's the issue in detail: https://i.sstatic.net/PN4N8.png The problem arises when the this.startLoginAnimation() function ...

Angular is patiently awaiting the completion of the subscription

Currently, I am in the process of developing a test application using Angular. The challenge arises when I attempt to retrieve data through a Get request and then return a value based on that data. The code snippet below outlines the scenario: public getN ...

Adding Zod validation for elements within an array in a React TypeScript application

Currently, I am utilizing Zod validation to confirm whether a given value is an email and also checking for the minimum length. However, I'm encountering an issue where if the field is left empty and the submit button is clicked, it displays the "requ ...

Guide to creating a Unit Test for an Angular Component with a TemplateRef as an Input

Looking to create unit tests for an Angular component that can toggle the visibility of contents passed as input. These inputs are expected to be defined as TemplateRef. my-component.component.ts @Component({ selector: "my-component", templateUrl ...

Creating an Identical Duplicate of a Returned Array in PHP: Mastering Array-Returning Functions

When working with PHP functions that return arrays, I noticed that when assigning the result to a variable like 'user' below, it creates a copy of the array and places it in index [0]. $user = query("SELECT * FROM `users` WHERE id = ?", $_SESSIO ...

What is causing TypeScript to compile and remove local variables in my Angular base controller?

I am trying to develop a base controller in Typescript/Angular for accessing form data, but I'm encountering an issue where the form member seems to be getting removed during compilation and is not present in the generated JavaScript code. Could you ...

AngularFire UPDATE -> APPLY CHANGES

I can't seem to figure this out. I'm wondering how to UPDATE a document that is returned in the WHERE clause using AngularFire: constructor(private db: AngularFirestore) { } var path = this.db.collection('users').doc('type') ...

Transforming check boxes within a form into an array stored in the $_POST superglobal

Is there an efficient method to gather data from a form using checkboxes and neatly organize it into a single array within the $_POST array on the receiving page? For instance, in my form, the HTML may appear as follows (x = checked): [x] Option One [ ] ...

Utilizing Angular for Webcam Integration

After trying out this code snippet: <video autoplay playsinline style="width: 100vw; height: 100vh;"></video> <script> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } }) .then(stream =&g ...

The library "vue-property-decorator" (v10.X) is causing issues with resolving in Webpack despite being successfully installed

Encountered an error message Module not found: Error: Can't resolve './decorators/Emit' while attempting to import functionality from the library vue-property-decorator. The package is installed and accessible, ruling out a simple installati ...

What is the best way to include an array variable with language file data in a library or helper so it is accessible in every controller file in CodeIgniter?

I am looking for a way to eliminate the repetitive array variable containing language files in every controller class. I have this public variable loaded with identical data in each controller, and it's becoming cumbersome to manage. Is there a way I ...