Starting a nested JSON structure with TypeScript and Angular 7

I'm encountering an error when attempting to make a POST request by sending an object

TypeError: Can not set property 'ItemCode' of undefined

My setup involves Angular 7 and Typescript

Here is my initial JSON:

    objEnvio:any = <any> {
        DocumentLines:<any>[]
    };

This is the code snippet triggering the error:

    Cadastrar() {
        var today = new Date();
        var self = this;
        this.objEnvio.CardCode = something;
        this.objEnvio.DocDueDate = something;
            this.objEnvio.BPL_IDAssignedToInvoice = something;
            $('.table-servico .mat-row').each(function(index, element){
                     self.objEnvio.DocumentLines[index].ItemCode =something;   // this line is throwing the error

Expected output:

   {
       "CardCode": "C000009",
       "DocDueDate": "2019-04-25",
       "BPL_IDAssignedToInvoice": 1,
       "DocumentLines": [
          {
          "ItemCode": "IT0001",
          "UnitPrice": 207,
          "Quantity": 4,
          "TaxCode": "1101-001",
          },
          {
          "ItemCode": "SV0003",
          "UnitPrice": 110,
          "Quantity": 1,
          "TaxCode": "1933-001",
          },
         ]
     }

Current outcome:

TypeError: Cannot set property 'ItemCode' of undefined

angulartypescript

Answer №1

Finally got it working, simply include an additional 

   newObj:any = <any>{
            Items:<any>[
                 <any>{

               }
          ]
        };

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

Using the novalidate attribute in Angular 4.0.0

Since migrating to angular 4, I have encountered a peculiar issue with my template-driven form. The required attribute on the input field appears to be malfunctioning. It seems like the form has the novalidate attribute by default, preventing HTML5 validat ...

javascripthtmlformsangular

Error: Unable to locate the custom module - TS2307

We have recently taken over a Next + TypeScript website from another developer and are attempting to create a new component that is heavily based on an existing one. I have duplicated the entire component and its subfolders at the same level as the origina ...

reactjstypescriptnext.js

Both buttons are calling the same function in Angular 6

I have created a component called add-customer.component.html <form [formGroup]="addCusForm"> <div id="login-container"> <h2 class="add-title">Customer Details</h2> <mat-form-field class="example-full-width ...

angularangular6

Assigning namespaces to a property of classes in typescript: A step-by-step guide

As I work on adding a declaration file to a TypeScript package, I encounter some syntax that looks like this: const Sequelize = require('Sequelize'); //... class Application { Sequelize = Sequelize; } To address this, I created a file named ...

typescripttsc

Can you delve into the origin of the term Modal in the context of Angular and web development?

My understanding of a Modal is that it is a webpage component that opens separately from the main page in order to maintain continuity. Am I correct? I am curious as to why it is referred to as a Modal. Could it be short for modularity? Meaning that vari ...

angular

The formBuilder controls' setValue() and patchValue() methods are not functional when called within a method of a Cordova plugin

In developing my Ionic tabs app, I have integrated the cordova-plugin-datepicker and utilized Angular Material to design the form fields. One issue I encountered is setting the text input's value with the date obtained from the plugin’s calendar in ...

angularionic-frameworkangular-materialcordova-pluginsangular-formbuilder

Importing a file using its absolute path in JavaScript

Within the dependencies directory, there exists a module named foo: import foo from '../dependencies/foo'; // This import statement works as intended The challenge arises when attempting to import from a different path due to deployment in an AW ...

javascripttypescript

Need help resolving the issue of "Type Property '' does not exist on type 'IntrinsicAttributes & Function'? Let's find a solution together

Looking at my parent component below: import FilterComponent from 'filter/filterComponent' const handleReload = useCallback( (event: MouseEvent) => { event.preventDefault(); // implement logic here }, [Reload, Fetch ...

javascriptreactjstypescript

Navigational assistance on the keyboard - Improving Accessibility

My situation involves selecting an option from a dropdown menu on X-page, which triggers the opening of Modal-1 while disabling the background. If a selection is made within Modal-1, it leads to Modal-2. I am facing two issues/questions: Upon opening Moda ...

htmlcssangularaccessibility

Tips for modifying the data type of a property when it is retrieved from a function

Currently, I have a function called useGetAuthorizationWrapper() that returns data in the format of { data: unknown }. However, I actually need this data to be returned as an array. Due to the unknown type of the data, when I try to use data.length, I enc ...

reactjstypescript

What could be causing the issue with Vite build and npm serve not functioning together?

After shifting from CRA to VITE, I am encountering a problem with serving my app. I successfully build my app using vite build. and can serve it using Vite serve without any issues. However, I want to use npm's serve command. Whenever I run vite bui ...

javascripttypescriptviteserve

Is it possible to showcase a variety of values in mat-select?

Is it possible to pass different values to the .ts file in each function? For example, can I emit a String with (selectionChange)="onChangeLogr($event)" and an object with (onSelectionChange)="onChangeLogr_($event)"? How would I go about doing this? ...

angulartypescript

Downloading Excel files in Angular using File Saver

Previously, I had set up a PHP post form that would download an excel file upon clicking the button. The form data was also posted to the URL successfully using plain HTML and submit form. This is the function in PHP that gets triggered when the form is p ...

phpangulardownloadphpexcel

We are in the process of migrating Angular from version 7 to 16, however, we are facing an issue where one of the libraries is still stuck on version 5, causing a Module not found error related to 'rxjs-com

We recently upgraded an Angular project from version 7 to 16 and we are currently using "rxjs": "~7.8.0". Interestingly, there is no mention of rxjs-compat in the package.json file either. However, during the building process of the application, we encoun ...

angularrxjsangular-migrationrxjs-compat

PhpStorm IDE does not recognize Cypress custom commands, although they function properly in the test runner

Utilizing JavaScript files within our Cypress testing is a common practice. Within the commands.js file, I have developed a custom command: Cypress.Commands.add('selectDropdown', (dropdown) => { cy.get('#' + dropdown).click(); } ...

javascripttypescriptphpstormcypresscypress-cucumber-preprocessor

Responsive MD-sidenav powered by Flex-Layout

I created an app using Angular and Flex-Layout, utilizing breakpoints to hide the navbar. Now I need to implement a click event to show the navbar when it is hidden. Here is what my code looks like: <md-sidenav-container> <md-toolbar> < ...

angularresponsiveangular-flex-layout

Phaser 3 game app on iOS generated with Capacitor lacks audio functionality

I have developed a basic test app using Phaser 3 (written in Typescript and transpiled with rollup) and am utilizing Capacitor to convert it into an iOS application on my Mac. This excerpt highlights the key functionality of the app: function preload () { ...

javascriptiostypescriptphaser-frameworkcapacitor

Tips for enforcing a mandatory type with TypeScript

Creating a custom type called InputType with optional properties like this: export type InputType = { configJsonUrl?: string; configJsObject?: DataType; rawData?: { [key: string]: string }; action?: () => void; }; export type DataType = { id ...

typescript

Creating a setup with Angular 2+ coupled with Webpack and a Nodejs

I have successfully configured Angular2+webpack along with NodeJs for the backend. Here is a basic setup overview: webpack.config.js: var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin') var Extract ...

node.jsangulartypescriptwebpack

The MatTableDataSource provides a promise that includes approximately 7000 rows of data

When attempting to load a large amount of data into a MatTableDataSource, I am facing an issue. I would like to display a loader until the data is fully set, but I am unsure of when that happens. I attempted to use a promise like this: return new Promise(r ...

javascriptangularpromiseangular-materialangular7