Using a conditional statement to generate objects within a TypeScript loop

Question

Using a conditional statement to generate objects within a TypeScript loop

I'm currently working on a loop within my code that involves adding dates from an array (dates) as key/value pairs ("date":"dates[i]") to objects in another array (values).

  values.forEach((obj, i) => obj.date = dates[i]);

The issue arises when some elements in the 'values' array are null and I encounter an error message saying 'ERROR TypeError: Cannot set property 'date' of null.'

Is there a way to handle this problem using TypeScript? Can I implement a check or condition for these null values and replace them with a new object containing the missing key/value pair ("date":"dates[i]")?

For example:

values.forEach((obj, i) => 

    if (values[i] == null){
        values[i] = {}
        values[i].date = dates[i]
       }
    else {
        obj.date = dates[i]
       }
);

In case it's relevant, I am using Angular 5 components for implementing this logic, hence technically referring to them as this.values and this.dates.

I'm struggling to find a solution to this issue. Thank you for your help!

javascript angular typescript

Answer 1

Answer №1

To achieve the desired behavior, follow these steps:

values = values.map((obj, i) => {
 if (!obj) {
   return {date: dates[i]};
 }
 obj.date = dates[i];
 return obj;
});

In this case, using Array.map is more suitable than Array.forEach because you intend to modify the objects in the array (Array.map creates a new object for each position during iteration, resulting in a new array at the end).

If you opt for Array.forEach, you can change properties of existing objects within the array, but you cannot do something like this:

values.forEach((obj, i) => {
 if (!obj) {
   obj = {date: dates[i]};
 }
 obj.date = dates[i];
});

The code inside the 'if' statement will not produce the intended result (the obj in the array will remain null), as each object is merely pointing to the corresponding element within the array.

Answer 2

To achieve the desired behavior, follow these steps:

values = values.map((obj, i) => {
 if (!obj) {
   return {date: dates[i]};
 }
 obj.date = dates[i];
 return obj;
});

In this case, using Array.map is more suitable than Array.forEach because you intend to modify the objects in the array (Array.map creates a new object for each position during iteration, resulting in a new array at the end).

If you opt for Array.forEach, you can change properties of existing objects within the array, but you cannot do something like this:

values.forEach((obj, i) => {
 if (!obj) {
   obj = {date: dates[i]};
 }
 obj.date = dates[i];
});

The code inside the 'if' statement will not produce the intended result (the obj in the array will remain null), as each object is merely pointing to the corresponding element within the array.

Using a conditional statement to generate objects within a TypeScript loop

Answer №1

Similar questions

Trouble arises with Webpack during the compilation of JavaScript files

Angular mistakenly uses the incorrect router-outlet

The operation to add a new user timed out after 10 seconds while buffering in the mongooseError

Is there a way to transfer innerHTML to an onClick function in Typescript?

The system was unable to locate node.js with socket.io

Retrieving outcome of Solidity contract function using web3-1.0.0-beta.27

Determining the Width of an Image Following the Application of a CSS Class Using Javascript

display dynamic graphs using json data from a php backend

Display a loading indicator while rendering several Vue components

"Using conditional statements to check for specific value ranges and properly handling cases where the result is undefined

What steps should be taken to handle files in the Next JS api?

Automatic type inference for TypeScript getters

Having trouble navigating to the link using Selenium WebDriver

Tips for accessing the individual field values of many documents within a MongoDB collection

Deciphering unconventional JSON formats

Exploring the Functionality of the MatSlideToggleChange Event in the mat-slide-toggle Component

Plugin for controlling volume with a reverse slider functionality

Using Aframe and JavaScript to create split id animations

Dark Theme Issue with Angular Material's CheckBox in Mat-Menu

How do EventEmitter<undefined> and EventEmitter<void> differ from each other?