The term 'Employee' is typically used as a classification, but in this context, it is being treated as a specific value

I am encountering an issue while trying to define a variable as type Employee. The error message 'Employee' only refers to a type but is being used as a value here. ts(2693) keeps appearing.

Here is my show-api.ts code:

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';

interface Employee {
    Id: String;
    EmployeeName: String;
    StartTimeUtc: String;
    EndTimeUtc: String;
    EntryNotes: String;
    DeletedOn: String;
}

@Component({
selector: 'app-show-api',
templateUrl: './show-api.component.html',
styleUrls: ['./show-api.component.css']
})

export class ShowApiComponent implements OnInit {

li:any;
lis: any=[];

constructor(private http : HttpClient){
    
}

ngOnInit(): void {
    this.http.get('API URL of my JSON file')
    .subscribe(Response => {
    
    if(Response){
        hideLoader();
    }

    **employee: Employee[]=Response**;

    
    });
    function hideLoader(){
    document.getElementById('loading')!.style.display = 'none';}
}}

Data retrieved from the API:

[

{"Id": "aa",
"EmployeeName": "bb",
"StartTimeUtc": "cc",
"EndTimeUtc": "dd",
"EntryNotes": "ee",
"DeletedOn": null },

{"Id": "ff",
"EmployeeName": "gg",
"StartTimeUtc": "hh",
"EndTimeUtc": "ii",
"EntryNotes": "jj",
"DeletedOn": null },

]

If the above issue cannot be resolved, kindly suggest an alternative method to fetch data from a JSON file.

Answer №1

The issue here lies in the improper declaration of the variable and not correctly mapping Response to the interface provided.

ngOnInit(): void {
    this.http.get('URL for my JSON data')
    .subscribe(Response => {

    
    if(Response){
        hideLoader();
    }

    //oldCode -> **employee: Employee[]=Response**;
    /* New code */ const employee: Employee[] = Response as Employee[];
    
    });
    function hideLoader(){
    document.getElementById('loading')!.style.display = 'none';}
}}

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

Is there a solution for the error "Unable to persist the session" in a Next.js application that utilizes Supabase, Zustand, and Clerk.dev for authentication?

I have successfully set up a Next.js application with Clerk.dev for authentication and Supabase for data storage. I'm also leveraging Zustand for state management. However, an error is plaguing me, stating that there's "No storage option exists t ...

Guide on implementing Regular Expressions in Directives for validation in Angular 8

Managing 8 different angular applications poses its unique challenges. In one of the applications, there is a directive specifically designed for validating YouTube and Vimeo URLs using regular expressions. Unfortunately, once the RegExp is declared, ther ...

What is the best way to refresh my component following a delete operation in React?

I am currently facing an issue with using Sweetalert2 and React (tsx) where I am unsure how to refresh my item list after deleting methods. Below is the code snippet that I have for a button that implements these functions: function DeleteCard(item: DataI ...

Eliminating the InMemoryWebApiModule in the production configuration of webpack for Angular applications

Currently, I am utilizing the InMemoryWebApiModule to simulate my data during development, but I want to prevent it from being used in a production environment. Is there a method to exclude it from being used in production on webpack? I have been attempt ...

Angular 15 is unfortunately not compatible with my current data consumption capabilities

I'm currently facing an issue with Angular 15 where I am trying to access the "content" element within a JSON data. However, when attempting to retrieve the variable content, I am unable to view the elements it contains. import { Component, OnInit } ...

What is the best way to trigger an API call every 10 seconds in Angular 11 based on the status response?

I am in need of a solution to continuously call the API every 10 seconds until a success status is achieved. Once the success status is reached, the API calls should pause for 10 seconds before resuming. Below is the code I am currently using to make the A ...

In the realm of JavaScript, the localeCompare() string method is more than willing to accept the presence of 'undefined' as a valid parameter for 'locale', while opting to outright reject any instance of

I have discovered a method to sort strings naturally const rows = ['37-SK', '4-ML', '41-NP', '2-YZ', '21', '26-BF']; console.log(rows.sort((a, b) => a.localeCompare(b, undefined, { numeric: tru ...

After integrating React Query into my project, all my content vanishes mysteriously

Currently, I am utilizing TypeScript and React in my project with the goal of fetching data from an API. To achieve this, I decided to incorporate React Query into the mix. import "./App.css"; import Nav from "./components/Navbar"; impo ...

Developing Java bindings for C++ classes with SWIG

Using SWIG allows me to easily generate bindings for my C++ code. I am seeking clarification on the topic of multiple inheritance. Within our C++ codebase, we have a base class called iClass that serves as an interface. Additionally, we have classes that ...

When you add the /deep/ selector in an Angular 4 component's CSS, it applies the same style to other components. Looking for a fix?

Note: I am using css with Angular 4, not scss. To clarify further, In my number.component.css file, I have: /deep/ .mat-drawer-content{ height:100vh; } Other component.css files do not have the .mat-drawer-content class, but it is common to all views ...

Dismiss the validator upon completion of submission

Two textboxes were created, one for the title and another for the name. Validations have been implemented to only submit information if both textboxes are filled. The issue arises when attempting to clear the variable values after submission, triggering ...

Sending data using formData across multiple levels of a model in Angular

I have a model that I need to fill with data and send it to the server : export interface AddAlbumeModel { name: string; gener: string; signer: string; albumeProfile:any; albumPoster:any; tracks:TrackMode ...

Working with TypeScript to set a value for an object's field

I have two objects of the same model: interface Project { _id?: string title: string description: string goal: string tasks?: Task[] createdAt?: Date updatedAt?: Date } The first object contains all fields from the interface, while the secon ...

Having issues with matSort functionality on mat-table in Angular

The content of my .html file is shown below: <mat-table [dataSource]="dataSource" padding matSort> <ng-container matColumnDef="uid"> <mat-header-cell *matHeaderCellDef mat-sort-header> Building UID </mat-header-cell&g ...

Using Angular 4 Component to Invoke JavaScript/jQuery Code From an External File

I have written a jQuery code that is executed at ngAfterViewInit(). //myComponent.ts ngAfterViewInit() { $(function () { $('#myElement').click(function (e) { //the code works fine here }); } However, I want t ...

What is the method for verifying the types of parameters in a function?

I possess two distinct interfaces interface Vehicle { // data about vehicle } interface Package { // data about package } A component within its props can receive either of them (and potentially more in the future), thus, I formulated a props interface l ...

Issue with Angular framework causing UI not to update when state changes occur

UPDATE: Deciding to close this discussion for a few reasons. First off, I believe this is essentially a duplicate topic. Second, I suspect that my specific scenario may be too artificial to benefit from the solution provided. I plan on studying the data mo ...

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

Currently, I am grappling with a dilemma. In my API documentation, I need to include a 'type' in an @ApiProperty for Swagger. Unfortunately, Swagger seems to be rejecting it and no matter how many websites I scour for solutions, I come up empty-h ...

I am having trouble reaching the _groups attribute in angular/d3js

I am encountering an issue when trying to access the "_groups" property in my code: function getMouseDate(scale){ var groupElement = d3.select("#group")._groups[0][0] var xCoordinate = scale.invert(d3.mouse(groupElement)[0]); co ...

Encountering the issue of receiving "undefined" in node.js after submitting data from an Angular form

I am facing an issue where I am getting 'undefined' in the backend (node.js) when I submit data from angular forms, even though I have used body-parser to parse the incoming data. server.js const express= require("express"); const app= ...