The variable 'data' is not a property of the type 'any[]'

I am currently facing an issue with a dummy service I created to fetch dummy data. When calling this service from a component ts file, I encountered the following error.

After searching through some similar posts, I still haven't been able to resolve my specific problem.

Error message:

Error: src/app/roaster-load/file-load-init/file-load-init.component.ts:60:19 - error TS2339: Property 'data' does not exist on type 'any[]'.

file-load-init.component.ts:

`

import { NgbModal, ModalCloseReasons, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
import { BaseComponent } from '../../common/scripts/baseComponent';
import { WINDOW } from '../../common/scripts/window.service';
import { Component, OnInit} from '@angular/core';
import { HttpClientModule, HttpClient, HttpHandler } from '@angular/common/http';
import { UploadService } from '../UploadService/upload.service';
import { InvalidSOEIDModel } from '../Uploadmodel/uploadmodel';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-file-load-init',
  templateUrl: './file-load-init.component.html',
  styleUrls: ['./file-load-init.component.css']
})
export class FileLoadInitComponent implements OnInit {
  
  InvalidSOEIDCount: any;     

  InvalidSOEIDModel:InvalidSOEIDModel[];
  ngOnInit(): void {
    
  }

  constructor(private http: HttpClient,
              private UploadService: UploadService,) {}

  OnUpload(){

    this.GetSOEIDVerifyData();
  };

  private GetSOEIDVerifyData(){  
    this.UploadService.UploadDataReturn()
     .subscribe((res: any[]) => {
          console.log(res);
          if (res.data) {
            this.InvalidSOEIDCount = res.data;
          }  
        }
     )}
}

upload.service.ts:

 import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';
    import { InvalidSOEIDModel } from '../Uploadmodel/uploadmodel'
    import {of} from 'rxjs';
    
    @Injectable()
export class UploadService {

 UploadDataReturn(): Observable<InvalidSOEIDModel[]> {
  return of([
      {
        SOEID: "AAAAA"
      },
      {
        SOEID: "BBBBB"
      }])
}
}
    

     

Answer №1

function fetchSOEIDData() {  
        this.UploadService.retrieveSOEID()
         .subscribe((response: InvalidSOEIDModel[]) => { 
//Updated response to InvalidSOEIDModel
//You can simply use 'response' instead of specifying the type
//The response is an array of InvalidSOEIDModel, so there is no property called data in it.
//Attempting to access res.data is incorrect
              if (response) {
                this.invalidSOEIDs = response.length //Correct way to get count
                this.invalidSOEIDs = response.length // Alternate correct method
              }  
            }
         )}

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

D3-cloud creates a beautiful mesh of overlapping words

I am encountering an issue while trying to create a keyword cloud using d3 and d3-cloud. The problem I am facing is that the words in the cloud are overlapping, and I cannot figure out the exact reason behind it. I suspect it might be related to the fontSi ...

Modifying state within reducers is not allowed

Encountered the following error while using @ngrx/store: index.js?4b23:19 State mutation is prohibited inside of reducers. (anonymous) @ index.js?4b23:19 (anonymous) @ index.ts:54 rootReducer @ index.ts:70 _initialStateFactory @ ng2.ts?2a33:24 AppModule ...

Encountering an issue when attempting to establish a connection to Redis using a cache manager within a Nest

Incorporating the NestJS framework into my project and utilizing Cash Manager to connect with Redis cache. Successfully connected with Redis, however encountering an error when attempting to use methods like set/get which shows 'set is not a function& ...

Updating the state of Formik

Currently, I'm knee-deep in a React project that requires a slew of calculations. To manage my forms, I've turned to Formik, and for extra utility functions, I've enlisted the help of lodash. Here's a peek at a snippet of my code: impor ...

Incorporating Highcharts JS into a mobile app for a seamless data

After deciding to create an Android application that mirrors some features of a webpage, such as weather meteograms built with Highcharts, I delved into the process. Considering my use of Angular 2, I thought utilizing Angular 2 + NativeScript would be th ...

Leveraging cloud functions on Firebase for maximum efficiency

Question: Do you require a backend language when using Firebase Cloud Functions, or can TypeScript alone suffice for coding tasks like creating a matchmaking system? Response: There seems to be some uncertainty on the matter even from ChatGPT himself. Is ...

Passing events from a parent component to dynamically created child components in Angular

UPDATE: I've decided to tackle this issue in a different way by retrieving dynamic child component values in the parent component's save() function, following the accepted answer. I am attempting to create a system where a parent component emits ...

Define the interface for a GraphQL resolver argument in code-first implementation

This specific GraphQL schema example from the Constructing Types page showcases how to define the Query type. // Creating the Query type var queryType = new graphql.GraphQLObjectType({ name: 'Query', fields: { user: { type: userType ...

What causes different errors to occur in TypeScript even when the codes look alike?

type Convert<T> = { [P in keyof T]: T[P] extends string ? number : T[P] } function customTest<T, R extends Convert<T>>(target: T): R { return target as any } interface Foo { x: number y: (_: any) => void } const foo: Foo = c ...

Get rid of the TypeScript error in the specified function

I am currently working on implementing a "Clear" button for a select element that will reset the value to its default state. Here is a snippet of my code: const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => { onChange( ...

Undefined value is returned for Vue 3 object property

Is there a way to extract additional attributes from the Keycloak object ? Currently, If I try, console.log(keycloak) it will display the entire keycloak object. Even after reloading, it remains in the console. However, when I do, console.log(keycloak.t ...

Guide to incorporating dynamic components into Angular Router

I am currently working on developing a pluggable Angular application. During my research, I came across the following insightful article: Building an extensible Dynamic Pluggable Enterprise Application with Angular Everything was going smoothly until I ...

The error at events.js:154 was not properly handled and caused an 'error' event to be thrown

Encountered an error while creating an Angular 2 application. I followed the instructions from this link to create a sample application. Upon running npm start Received the following error, events.js:154 throw er; // Unhandled 'error' even ...

Tips on designing unique field validation decorators in NestJS using GraphQL

I'm currently developing a NestJS API using apollo-server-express and have created an InputType for appointments as shown below: @InputType() export class AppointmentInput { @Field(of => String) @IsNotEmpty() name: string; @Field(o ...

Enhance your text in TextInput by incorporating newline characters with advanced editing features

I'm encountering an issue with my Textarea component that handles Markdown headers: type TextareaProps = { initValue: string; style?: StyleProp<TextStyle>; onChange?: (value: string) => void; }; type OnChangeFun = NativeSynthetic ...

Issue with ngStyle not functioning properly with conditional operator

I am currently learning how to use Angular4 ngStyle by going through a tutorial. Here's the code I have been working on: app.component.html <button [ngStyle]="{ 'backgroundColor': canSave ? 'blue': 'gray', ...

What methods can I utilize to manage the output generated by the C# backend project?

I'm new here and I'm thrilled to be asking my first question! :) Currently, I am working on a car rental project using C# for the backend and Angular for the frontend. I have encountered an issue while trying to register a new user with existing ...

Navigating through an interface array using *ngFor in TypeScript

After successfully implementing an interface to retrieve data from a service class, I encountered an issue when attempting to iterate through the FilteredSubject interface array. Despite using console.log, I was unable to achieve the desired outcome. You ...

Retrieve the accurate file name and line number from the stack: Error object in a JavaScript React Typescript application

My React application with TypeScript is currently running on localhost. I have implemented a try...catch block in my code to handle errors thrown by child components. I am trying to display the source of the error (such as file name, method, line number, ...

Ways to retrieve data from response instead of subscription JSON in Angular 2/4

My Service : retrieveData(url,request) { return this.http.post(this.apiUrl+url,request).subscribe( (response) => {return response.json()} ); } My Component : ngOnInit() { this.data = this.dataService.retrieveData(&apos ...