Error message while attempting to update devextreme-datagrid: "Received HTTP failure response for an unknown URL: 0 Unknown Error"

Need help with updating the devextreme-datagrid. Can anyone assist?

lineController.js

 router.put("/:id", (req, res) => {
      if (!ObjectId.isValid(req.params.id))
        return res.status(400).send(`No record with given id : ${req.params.id}`);
      console.log({
        msg: "Line update process",
        dataReceived: req.body
      });
      var emp = {
        // code block for updating fields 
      };
      Line.findByIdAndUpdate(
        req.params.id,
        { $set: emp },
        { new: true },
        (err, doc) => {
          if (!err) {
            res.send(doc);
          } else {
            console.log(
              "Error in line update:" + JSON.stringify(err, undefined, 2)
            );
          }
        }
      );
    });

line.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';

import {Line} from './line.model';
@Injectable({
  providedIn: 'root'
})
export class LineService {
  selectedLine: Line;
  lines: Line[];
  readonly baseURL = 'http://localhost:3000/lines';

  constructor(private http: HttpClient) { }

  postLine(emp: Line) {
    return this.http.post(this.baseURL, emp);
  }

  getLineList() {
    return this.http.get(this.baseURL);
  }

  putLine(emp: Line) {
    return this.http.put(this.baseURL + `/${emp._id}`, emp);
  }

  deleteLine(_id: string) {
    return this.http.delete(this.baseURL + `/${_id}`);
  }
}

line.component.html

<dx-data-grid
          id="gridContainer"
          [dataSource]="lineService.lines"
          title="SQDCM Data Entry"
          keyExpr="_id"
          [columnAutoWidth]="true"
          [showBorders]="true"
          (onRowInserted)="onEdit($event)"
          (onRowUpdated)="onUpdate($event)"
          (onRowRemoved)="onDelete($event)"
        > 

line.component.ts

onUpdate(event) {
  console.log(event);
  const merged = {_id: event.key, ...event.data};
   this.lineService.putLine(merged).subscribe(res => { });
}

When updating data, it logs to the console.

{key: "5c6ac45adb48bf3850eebc74", data: {…}, component: inheritor, element: dx-data-grıd#gridContainer.dx-widget.dx-visibility-change-handler} component: inheritor {_events: {…}, _eventsStrategy: NgEventsStrategy, callBase: undefined, _$element: initRender(1), NAME: "dxDataGrid", …} data: isKazasi: 8 proto: Object element: dx-data-grıd#gridContainer.dx-widget.dx-visibility-change-handler key: "5c6ac45adb48bf3850eebc74" proto: Object

and an error occurs:

{ msg: 'Line update process', dataReceived: { _id: '5c6ac45adb48bf3850eebc74', isKazasi: 8 } } Error in line update:{ "message": "Cast to number failed for value \"NaN\" at path \"devamsizlikYuzdesi\"", "name": "CastError", "stringValue": "\"NaN\"", "kind": "number", "value": null, "path": "devamsizlikYuzdesi" }

Answer №1

An error message has indicated a problem with the calculation of devamsizlikYuzdesi, specifically in the following line:

devamsizlikYuzdesi:(req.body.iseGelmeyenlerinToplamSuresi / (req.body.bantKisiSayisi * 9)) * 100 

It seems that either one or both of the properties are undefined:

iseGelmeyenlerinToplamSuresi or bantKisiSayisi.

To resolve this issue, I recommend checking these values for undefined and assigning a default value of 0 to them.

Add the following code snippet before var emp = {...

if(req.body.iseGelmeyenlerinToplamSuresi == undefined){
    req.body.iseGelmeyenlerinToplamSuresi = 0;
}

if(req.body.bantKisiSayisi == undefined){
    req.body.bantKisiSayisi = 0;
}

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 are some ways to utilize tuples in TypeScript along with generics?

My mission is to create a type safe mapping object where I can define key/value pairs just once. I've managed to achieve this with the code below: const myPropTuple = [ [0, "cat"], [1, "dog"], [2, "bird"] ] a ...

What effect does choosing an image in my user interface have on halting my Web API?

When launching my .NET Core 3 Web API in Visual Studio 2019, everything runs smoothly and handles requests without issue. However, an unexpected problem arises when I interact with my Angular UI. Upon navigating to a new section designed for selecting fil ...

reusable angular elements

I'm facing a situation where I have a search text box within an Angular component that is responsible for searching a list of names. To avoid code duplication across multiple pages, I am looking to refactor this into a reusable component. What would b ...

Transferring information from parent page to child page using Angular version 8.2.4

As a newcomer to Angular, I am facing a challenge in sharing data between pages upon loading the main page. The structure involves using dynamic forms to generate dynamic pages within the main page. However, when trying to pass data from the main page to t ...

Ways to access the value of the parent observable?

I've been exploring the concept of nesting HTTP requests using mergeMap. The API I'm working with sends data in parts, or pages, which means I have to make more requests based on the total number of pages. To determine the number of pages, I alw ...

Angular developers may encounter a dependency conflict while attempting to install ngx-cookie

I'm currently facing an issue while attempting to add the ngx-cookie package for utilizing the CookieService in my application. Unfortunately, I am encountering some dependency conflicts that look like the following: $ npm install ngx-cookie --save np ...

Exploring resources within a library in Angular

I need help accessing assets from a shared library within my nx workspace. Here is the structure: /apps -- my-app // ... /libs -- shared -- assets -- resources -- translation.json The shared lib has an alias defined as @my-company/s ...

Uncovering Module - which interface is missing a defined structure?

Can anyone explain why I am receiving this error in TypeScript 3.9.2: 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type. The code triggering the error is shown below: const Module = function(){ ...

Utilizing Angular for Webcam Integration

After trying out this code snippet: <video autoplay playsinline style="width: 100vw; height: 100vh;"></video> <script> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } }) .then(stream =&g ...

Avoid using propTypes for props verification

Looking for a solution to handle multiple props on a button: interface buttonProps { secondary?: boolean; tertiary?: boolean; width?: number; children?: any; icon?: string; } If the button includes an icon without any children, how can ...

Custom Angular 2 decorator designed for post-RC4 versions triggers the 'Multiple Components' exception

Currently, I am in the process of updating my Ionic 2 component known as ionic2-autocomplete. This component was initially created for RC.4 and earlier iterations, and now I am working on migrating it to Angular 2 final. One key aspect of the original des ...

Firestore rule rejecting a request that was meant to be approved

Recently, I came across some TypeScript React code that fetches a firestore collection using react-firebase-hooks. Here's the snippet: const [membersSnapshot, loading, error] = useCollectionData( query( collection(db, USERS_COLLECTION).withConve ...

Angular Material Date Time Selector

I'm having trouble integrating a date time picker in an Angular Material form. Here's the code I am using: <mat-form-field> <input formControlName="nextScheduledDate" mdc-datetime-picker="" date="true" time="true" type="text" id="date ...

Broadening Cypress.config by incorporating custom attributes using Typescript

I'm attempting to customize my Cypress configuration by including a new property using the following method: Cypress.Commands.overwrite('getUser', (originalFn: any) => { const overwriteOptions = { accountPath: `accounts/${opti ...

Establishing a default value as undefined for a numeric data type in Typescript

I have a question regarding setting initial values and resetting number types in TypeScript. Initially, I had the following code snippet: interface FormPattern { id: string; name: string; email: string; age: number; } const AddUser = () => { ...

Attempting to compile TypeScript by referencing ng2-bootstrap using Gulp within Visual Studio

I've been struggling with this issue for a few days now, and I'm really hoping someone can help me out. Currently, I am experimenting with Angular2 in an aspnet core project. The setup involves using a gulpfile.js to build .ts files and transfer ...

Function `getEventMap` that retrieves the specific "EventMap" associated with an EventTarget T

In the file lib.dom.d.ts, there is a defined interface: interface EventTarget { addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void; dispatchEvent(event: Event): boo ...

Extracting data from HTML elements using ngModel within Typescript

I have an issue with a possible duplicate question. I currently have an input box where the value is being set using ngModel. Now I need to fetch that value and store it in typescript. Can anyone assist me on how to achieve this? Below is the HTML code: ...

NextJS: Build error - TypeScript package not detected

I'm facing an issue while setting up my NextJS application in TypeScript on my hosting server. On my local machine, everything works fine when I run next build. However, on the server, I'm encountering this error: > next build It seems that T ...

When attempting to import functions from the firebase or @angular/fire libraries in Visual Studio Code, I am not receiving any suggestions from the IDE

I am facing an issue with initializing my Firebase app and using its features in my Angular app. Despite installing all the necessary packages using npm install firebase @angular/fire, I am not receiving any suggestions from the IDE. It seems like the pack ...