Error Alert: missing property data in angular 5 type

I attempted to design an interface in interface.ts. The data consists of an array of objects inside the Column. Below is the code for my interface:

export class User {
result: boolean;
messages: string;
Column=[];
data=[];
}
export class Column {  
name:string;
category:boolean;
count:number;
}

export class data {
name:string;
category:string;
}

The following code is used in the service.

getData(): Promise<User> {
return Promise.resolve(
{ result: true, messages: 'Maria','Column':[{
name:'ramu',category:'c',count:4, "data":[{"name":"",      "category:""
    }]
}]
}
);
}

However, I encountered a type error. I have attached a screenshot below for your reference. Please check and see the error screenshot. Code URL Stackblitz

https://i.stack.imgur.com/KASbQ.png

Answer №1

Give it a shot

  fetchData(): Promise<Person> {
return Promise.resolve(
{ success: true, note: 'Maria',
  'Columns':[{   person:'John',gender:'male',age:30}], 
 "details":[{ "name":"", "occupation":"" }]
});
}

Answer №2

Check out the code snippet below.

import { Injectable } from '@angular/core';
import { Http, Headers, Response, URLSearchParams, RequestOptions } from '@angular/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { User } from './interface';
import { Column } from './interface';

import 'rxjs/add/operator/map';

@Injectable()
export class DataService {

  userCookie: any;
  loginAlertMessage: string;
  constructor(private http: Http
  ) {
  }

  getData(): Promise<User> {
    return Promise.resolve(
      {
        result: true, messages: 'Maria',
        'Column': [{ name: 'ramu', category: 'c', count: 4 }],
        "data": [{ "name": "", "category": "" }]
      });
  }
}

DEMO

Answer №3

Explore the interface.ts

export class User {
  isValid: boolean;
  feedback: string;
  Column=[];
}
export class Column {  
  title:string;
  isCategory:boolean;
  total:number;
  rows=[]; 
}
export class RowData {
  title:string;
  category:string;
}

Data Service Operation

getData(): Promise<User> {
    return Promise.resolve(this.data);
}

DEMO IN ACTION

Answer №4

Some may argue that the suggestions offered by other responses are valid.

However, in my personal view, it is recommended to utilize "type assertion" to specify the object as the Type you need (assuming the data aligns with the required format)...

getData(): Promise<User> {
    return Promise.resolve(
      {
        result: true, messages: 'Maria',
        'Column': [{ name: 'ramu', category: 'c', count: 4 }],
        "data": [{ "name": "", "category": "" }]
      } as User);
  }

In essence, append as User at the end of the object.

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

The usage of @Inject('Window') in Angular/Jasmine leads to test failures, but removing it results in code failures

Currently, I am encountering a dilemma related to using Angular's @Inject('Window') within a web API service. This particular issue arises when the Window injection is utilized in the service constructor, leading to test spec failures in the ...

imported classes from a module cannot be accessed within the same module

Here is some TypeScript code that I wrote: Within my module, I am importing a library called ts-events. import {SyncEvent} from 'ts-events' module MyModule{ export class MyService{ } } In the same module but in a different file, I'm ...

Learn the process of seamlessly uploading various document formats, videos, and previewing documents with Angular software

I am having trouble viewing uploaded files in the carousel. While I can see video and image files, other document formats are not displaying. Can someone please recommend a solution to enable viewing all types of documents as well? mydata = [] onSelect ...

Exploring the Validation of Forms in Angular for Practical Implementations

I'm curious to know whether creating a simple form validation process can really be as complicated as it seems, or if I may be overlooking something. It's fairly straightforward to demonstrate the power of form validation in a tutorial setting. ...

Should the checkbox be marked, set to 1?

I am looking for a way to call a method when the user checks or unchecks multiple checkboxes. Do you have any suggestions on how I can achieve this? Here is what I have tried so far: <input type="checkbox" [ngModel]="checked == 1 ? true : checked == 0 ...

Angular is throwing an error stating that the type '{ }[]' cannot be assigned to the type '[{ }]'

I'm in need of assistance and clarification regarding the error I encountered in my application... When I receive a JSON response from an API with some data that includes an array of products, I aim to extract these products (izdelki) from the array, ...

Avoiding Overload Conflicts: TypeScript and the Power of Generic Methods

I have created an interface type as follows: interface Input<TOutput> { } And then extended that interface with the following: interface ExampleInput extends Input<ExampleOutput> { } interface ExampleOutput { } Additionally, I ha ...

What is the solution for fixing an error that says "There is no 'style' property on the 'Element' type"?

I'm struggling to fix an error in my JavaScript code. I created a script to display a tab indicator when a tab is clicked, but I keep getting the error message: "Property 'style' doesn't exist on type 'Element'". The tabs them ...

What is the preferred build tool to use with Deno?

It has come to my attention that deno no longer necessitates the use of package.json (compatible with npm/yarn) to detail its dependencies. However, when it comes to build/run scripts, is package.json still the recommended descriptor or are there alternat ...

The dropdown feature in Bootstrap 5 seems to be malfunctioning in Angular 12

I am facing issues while trying to implement the Bootstrap 5 dropdown in Angular 12. After installing all required packages and adding them to the angular.json file, I still cannot get it to work properly. Even after copying the example directly from the ...

Troubleshoot Issue with Installation of angular2-jwt.js and Provide Solutions for Error Code

I am currently following the installation guidelines to install Respond CMS from Github. My progress has hit a snag while attempting to copy files to the public folder using gulp. and it's the third command in step 2. This brief error message aris ...

Generating a type definition from a JavaScript file

Looking to convert a .js file to a d.ts file, I've noticed that most resources on this topic are from 2 years ago How do you produce a .d.ts "typings" definition file from an existing JavaScript library? My question is, after 2 years, is there a simp ...

Optimizing Your Angular2 Bundle with Webpack: Best Practices for Minimizing Code Size

I have attempted to include the --optimize-minimize option in my webpack command (version 2.1.0-beta.27), but I am still receiving a bundle.js instead of a bundle.min.js: "build:production": "node_modules/.bin/del-cli public/js/app && node_module ...

What is the process of converting a byte array into a blob using JavaScript specifically for Angular?

When I receive an excel file from the backend as a byte array, my goal is to convert it into a blob and then save it as a file. Below is the code snippet that demonstrates how I achieve this: this.getFile().subscribe((response) => { const byteArra ...

In what scenario would one require an 'is' predicate instead of utilizing the 'in' operator?

The TypeScript documentation highlights the use of TypeGuards for distinguishing between different types. Examples in the documentation showcase the is predicate and the in operator for this purpose. is predicate: function isFish(pet: Fish | Bird): pet ...

Is there a way to utilize a value from one column within a Datatables constructor for another column's operation?

In my Typescript constructor, I am working on constructing a datatable with properties like 'orderable', 'data' and 'name'. One thing I'm trying to figure out is how to control the visibility of one column based on the va ...

Angular routerlink params can be secured using encryption and decryption techniques

Can anyone provide me with a reliable method to encrypt and decrypt querystring parameters, such as gmail.com? Also, I am looking for information on how to obtain these query parameters. The path structure I am working with is: { path: 'myPrograms/: ...

Unable to access attribute of instantiated class

I am relatively new to TypeScript and I recently encountered a problem that's stumping me. I'm working on setting up a REST API using Express. The setup involves a router that calls a controller, which in turn invokes a service method before ret ...

Exploring the Impact of 2 HostBindings on Class Generation from Inputs in Angular 4

I'm struggling with the code in my component, which looks like this: @Component({ selector: "home", templateUrl: "./home.html" }) export class Home { constructor() {} @HostBinding("class") @Input() public type: string = "alert" @HostBindi ...

What is the process to verify a password?

Hey everyone! I've successfully implemented control forms in my login.component.ts for handling email and password input. Now, I want to add these controls to my register.component.ts as well. Specifically, how can I implement controls for the passwor ...