Encountering a TSLint interface error when adding a value to a nested array

Currently, I am transforming responses into an array of Months and Days, with each Day containing an array of numbers. The logic itself is functioning properly, however, I am encountering a tslint error specifically when attempting to push a value into the day array.

Error - Argument of type 'number' is not assignable to parameter of type 'DayTimeData'.

Below is the interface code that I am utilizing:

export interface SerializeHourValData {
  name: string;
  data: MonthDateTimeData[];
}

export interface MonthDateTimeData {
  [month: number]: DayTimeData[];
}

export interface DayTimeData {
  [day: number]: number[];
}

Here is the part of the code where the error is occurring:

public valData: SerializeHourValData[] = [];

// Within this loop, I am retrieving the month and day numbers and utilizing them to store hourly data in the 'day' array.

this.valData[index].data[month] = this.valData[index].data[month] || [];
    this.valData[index].data[month][day] = this.valData[index].data[month][day] || [];

    for (const key in hourlyData) {
      if (key.indexOf('h') > -1) {
        this.valData[index].data[month][day].push(+hourlyData[key]); // The tslint error occurs here for '+hourlyData[key]'
      }
    } 

View a snapshot of how the data looks post-serialization here.

Please advise on where I may have made errors within the interface.

Answer №1

The issue lies in your data models not aligning properly. In order to push values to the this.valData[index].data array, it must be an array of MonthDateTimeData objects as shown in the image you shared. However, you are currently only passing a number to the push function of the array.

As per the SerializeHourValData interface:

export interface SerializeHourValData {
  name: string;
  data: MonthDateTimeData[];
}

The interface expects the data to be an array of MonthDateTimeData objects. Instead of passing an array of MonthDateTimeData objects, you are passing just a number when pushing a value to the this.valData[index].data. Adjust it to an array or update your models accordingly for it to function correctly.

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

What is the best way to save emitted values from rxjs?

I'm currently grappling with understanding rxjs. In my angular project, I've created a service that emits and listens to boolean values that indicate the start and completion of asynchronous operations. export class UpdateScriptRunningEventServi ...

I am looking for an Angular Observable that only returns a single value without any initial value

Is there a way to create an Observable-like object that calls a webservice only once and shares the result with all subscribers, whether they subscribe before or after the call? Using a Subject would provide the result to subscribers who subscribed before ...

Tips for creating a script that waits for a specific amount of time before moving on to the next execution block in Protractor

Need to automate a test case that involves filling out a form with 5 date pickers and 30 fields. Once the form is filled, a jar needs to be invoked to retrieve the data from the DB and process it independently. Note: The jar does not send any value back t ...

Creating a dynamic navigation bar that adjusts to changing content requires careful planning and implementation

Struggling with achieving my visual mockup while designing a webpage: Check out my web design mockup Currently focusing on section 2 of the page. Using Angular 5, Bootstrap 3, and ngx-bootstrap library to integrate Bootstrap components into Angular. Here ...

React app version displaying incorrect links to CSS and JS files

I have been immersed in a React project called Simple-portfolio, you can find the GitHub repository here: https://github.com/Devang47/simple-portfolio and the live site at this URL: While everything works smoothly on the development server, I encountered ...

Array - Modifications do not pass down to the child component

I am observing the following structure in the code: <div id="join-container"> <join-chain id="my-join-chain" [selectedColumn]="selectedColumn" (updatedStatements)=onUpdatedStatements($event)> </join-chain> <tile-ca ...

Issue with PassportJS and Express 4 failing to properly store cookies/session data

I have a situation with my Express 4 app using Passport 0.3.2. I've set up a passport-local strategy, and it's successfully retrieving the user information when the /session endpoint is provided with a username and password. The issue arises whe ...

Angular issue: Unable to scroll to top after route change and loading a new component

In the process of developing a simple Angular application, I encountered an issue. When navigating from my home page to the services page, scrolling down, and then returning to the home page, the scroll position is always set to the bottom of the page. My ...

How can I test Angular Router using Jest?

I'm currently experimenting with testing the functionality of a collapsed element in a sidebar when a user navigates to a specific page. I'm encountering some challenges in trying to simulate the behavior of the Angular Router in my Jest tests. ...

Singleton Pattern in Angular Dependency Injection

In my code, I have a service called MyService that is decorated with the following: @Injectable({ providedIn: 'root' }) Part of its implementation includes: private myData: string = ''; setData(data: string) { this.myData = d ...

A method for transferring information stored in chrome.storage to a variable within an Angular component

How can I effectively assign data fetched from chrome.storage.sync.get to my Angular component's variable? Below is the code snippet of my component: export class KTableComponent implements OnInit { words: string[] = []; constructor() { } ...

Exploring the (*ngFor) Directive to Iterate Through an [object Object]

Attempting to iterate through the array using *ngFor as shown below. let geographicalArea = [{ "_id": "5e77f43e48348935b4571fa7", "name": "Latin America", "employee": { "_id": "5e77c50c4476e734d8b30dc6", "name": "Thomas", ...

Unable to directly assign a variable within the subscribe() function

My goal is to fetch a single row from the database and display its information on my webpage. However, I've encountered an issue with the asynchronous nature of subscription, which prevents immediate execution and access to the data. Upon running the ...

Access the CSV file using Office365 Excel via a scripting tool

Objective I want to open a CSV file using Office365's Excel without actually saving the file on the client's machine. Challenge The issue with saving raw data on the client's machine is that it leads to clutter with old Excel files accumu ...

Tips for assigning the 'store_id' value to a variable in Angular 6 within the Ionic4 environment

Trying to retrieve the store_id from the StorageService in Ionic4 (angular 6). Managed to retrieve the store_id using: let id = this.storageService.get('store_id'); id.then(data => { this.store.push(data) }); After pushing it into an ar ...

The return type of a getter is `any` if the object contains a method and is processed by a generic function

I am facing an issue with my code where the getter's return type is set to any, even though the actual return type should be clear. There are certain additional functions triggering this behavior: // This is necessary for reproduction const wrapperFun ...

When utilizing Monggose, Angular, and Node, a route containing the deleteOne method repeatedly reports that the object has been successfully deleted, despite the delete count remaining

I've encountered a similar issue to others, but their solutions didn't work for me. I'm working on a small MEAN app with mongoose and facing a problem when trying to delete a user or any other object stored in the collection. The route seems ...

Ways to populate missing cells with a default hyphen symbol

Looking for a way to default empty cells in my primeng datatable to '-'. Consider the following data: [ { 'column': null }, { 'column': { 'name': 'A' } }, { 'column': { 'name': ...

Type '{}' is lacking the subsequent attributes in type 'Record'

This is the code snippet I am working with: const data : Record<MediaType, Person[]> = {}; I encountered an error while initializing the 'data' object as shown above. The error message specifies that certain properties are missing from typ ...

Getting the Angular component class reference within a triggered Highcharts selection event callback - what's the best approach?

It seems like I'm facing a common javascript closure issue, but let me illustrate it with a specific example as I'm struggling to grasp it in an Angular context. In my Angular component, I'm using the Highcharts library to visualize data. W ...