I am working on an Angular application that includes a dynamic form for an attendance system for employees. I am currently trying to figure out how to generate the JSON data

I have a dynamic form in my reactive attendance system for employees. When I click on submit, I need to generate JSON data like the following:


{
  "user_id": "1", 
  "branch_id": "4", 
  "auth_token": "59a2a9337afb07255257199b03ed6076", 
  "date": "2019-11-12", 
  "attendance_log": [
    {
      "emp_id": "1", 
      "status": "Preset" 
    }, 
    {
      "emp_id": "1", 
      "status": "Preset" 
    },
    { 
      "emp_id": "1", 
      "status": "Preset" 
    }
  ] 
}

After that, I need to pass this JSON data to the backend API.

How should I proceed?

jsonangulartypescript

Answer №1

If you're looking to retrieve form control values, consider the following methods:

  • form.value(): Use this to receive only the values of enabled controls.
  • form.getRawValue(): This function will give you a JSON object containing all values, both enabled and disabled.

After getting the JSON data, you can send it through a post request to potentially resolve your problem.

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 TypeScript: creating functions without defining an interface

Can function props be used without an interface? I have a function with the following properties: from - HTML Element to - HTML Element coords - Array [2, 2] export const adjustElements = ({ from, to, coords }) => { let to_rect = to.getBoundingC ...

javascripttypescriptinterface

Object.assign versus the assignment operator (i.e. =) when working with React components

Just a quick question: I've come across some answers like this one discussing the variances between Object.assign and the assignment operator (i.e. =) and grasp all the points made such as object copying versus address assignment. I'm trying to ...

javascriptreactjstypescriptreact-nativetsx

Getting the URL for a downloaded image using ImageLoad on Android

I encountered an issue with my Android application In the database, I stored URLs of some images and now want to download these images for a viewpager display using ImageLoader. The problem arises when trying to download the image URLs from the server. I ...

androidjsonandroid-viewpager

How to display JSON images in an Android listview

I'm facing difficulty in loading images from a JSON file to the listview on my Android app Although I know that I need to use BitmapFactory.decodeStream, I am unsure about how to proceed with the implementation Below are the details of my adapter an ...

androidjsonlistview

Does angular have a feature comparable to JavaScript's .querySelectorAll()?

I developed an inventory calculator in JavaScript that provides item count based on weight. The calculator has 4 inputs, and now I'm looking to replicate the same functionality using Angular. Is there a method in Angular similar to .querySelectorAll() ...

javascriptarraysangular

When the Mat tab is clicked, the Expand Collapse feature associated with it will be displayed

Currently, I am implementing Mat tabs (vertical) in one component and Mat expand/collapse functionality in another component. Upon clicking on a tab, the corresponding Mat expand should be displayed. You can view the progress of my work on this Stackblitz ...

angularangular-materialmaterial-uiangular8mat-tab

Converting JSON data in Spring MVC 3.2 for REST services

I am encountering an issue while attempting to send a List of data as JSON from my Spring Controller. The error message "Could not find acceptable representation" is being thrown. Below are the snippets of code from different parts of my application: pom. ...

javajsonspringrestspring-mvc

Tips on efficiently adding and removing elements in an array at specific positions, all the while adjusting the positions accordingly

My challenge involves an array of objects each containing a position property, as well as other properties. It looks something like this: [{position: 1, ...otherProperties}, ...otherObjects] On the frontend, these objects are displayed and sorted based on ...

javascripttypescript

Is there a way to Toggle the Visibility of Multiple Divs in ngx-virtual-scroll?

Check out the progress I've made so far: https://stackblitz.com/edit/angular-ngx-virtual-scroller-byykpn I am now looking to implement a feature that will Expand/Collapse all divs located after the group header. ...

angularangular-materialngxsangular-cdk-virtual-scroll

Tips on how to effectively sort JSON data within the itemBuilder function

I am facing an issue with filtering JSON data that contains objects with name, latitude, and longitude. I only want to display the names of objects that have both latitude and longitude values. Example object in JSON with lat and lng: dynamicDataUrl: ...

jsondartflutter

Creating a dynamic JSON object and retrieving the response in a JSP for data-driven documents

I am a beginner with the D3 API and I need to create a tree-like structure using a JSON file with hardcoded values. Additionally, I have a servlet that retrieves some values from a database which I want to dynamically convert into JSON in the servlet and s ...

javajavascriptjsonservletsd3.js

Arrange an array within an Angular component

I'm in the process of organizing my list-component made with Angular Material. <div style="width:30%;"> <mat-nav-list matSort (matSortChange)="sortData($event)"> <th mat-sort-header="stuff.name">Name</th> ...

angularlisttypescriptsortingangular-material

Error: Circular reference detected in JSON during POST request

Trying to make a POST call using JsonApi with the following example: { "data": { "attributes": { "booked_by_patient": true, "class": "PUBLIC", "descripti ...

c#jsonapijson-apijsonapi-serialize

Issue with the rendering of Navigation Bar in Angular 4 Bootstrap alpha

I am currently working on integrating Bootstrap 4 into my Angular 4 application by following a tutorial. However, I have encountered an issue with the navigation bar not functioning correctly. https://i.sstatic.net/92phM.png After taking the necessary st ...

angularbootstrap-4

Running an HTTP request conditionally within combineLatest

I'm working on a combineLatest function that makes 2 http requests, but I only want the second request to be made if a specific condition is satisfied. combineLatest([ this.leadsService.fetchALLLeadsActivityChart(this.clientId, this.getParams(option ...

angulartypescript

Jackson - mark the class as ineligible for serialization based on certain property conditions

In my scenario, consider an object named VEHICLE with a collection of PART objects class Vehicle{ List<Part> parts; //getters and setters.. } Now let's assume that the Part class has a field called boolean isBroken; I am looking for a ...

javajsonjackson

Navigating complex JSON structures in Go Lang

Dealing with a messy block of JSON can be quite a task, especially when you need to read and modify values that are deeply nested within. In my case, I specifically want to target two values designated by "I want this!" using Go. The challenge arises from ...

jsongostruct

Encountering a type mismatch error in Typescript while working with Redux state in a store file

It appears that I have correctly identified all the types, but could there be a different type of Reducer missing? 'IinitialAssetsState' is not assignable to type 'Reducer' The complete error message: Type '(state: { assets: n ...

javascripttypescriptreduxreact-reduxstore

Send information to the main application component

Can data be passed two or more levels up from a Child Component to the App Component? https://i.stack.imgur.com/JMCBR.png ...

angular

Error with Angular PWA: A fatal error has occurred as the module '@schematics/angular/utility' cannot be located

Trying to execute the command below has been giving me trouble: ng add @angular/pwa Every time I run it, an error pops up saying: An unhandled exception occurred: Cannot find module '@schematics/angular/utility' I attempted to install @schemati ...

angularprogressive-web-apps